/** Shopify CDN: Minification failed

Line 6815:0 Unexpected "/"
Line 8869:44 Expected identifier but found "!"

**/
@charset "UTF-8";
/**
	Timings
 */
:root {
  --timing-micro: 0.1s;
  --timing-short: 0.2s;
  --timing-base: 0.4s;
  --timing-long: 0.7s;
  --timing-second: 1s;
  --animate-time: 0.8s;
  --animate-delay: 0.3s;
  --animate-img-scale: 0.6s;
  /**
  * Easing.
  */
  --easing-linear: cubic-bezier(0, 0, 1, 1);
  --easing-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --easing-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --easing-ease-in: cubic-bezier(0.42, 0, 1, 1);
  --easing-ease-out: cubic-bezier(0, 0, 0.09, 1);
  --easing-slov-in-fast-out: cubic-bezier(0.6, 0.14, 0, 1);
  /**
  * Config: Layers
  * -----------------------------------------------------------------------------
  * Visual motif used to create groupings, content associations and focus through depth.
  */
  --layer-negative: -1;
  --layer-base: 0;
  --layer-flat: 1;
  --layer-raised: 2;
  --layer-sticky-btn: 7;
  --layer-sticky: 11;
  --layer-overlay: 14;
  --layer-temporary: 16;
  --layer-pop-out: 24;
  --layer-pop-out-overlay: 25;
  --layer-pop-out-overlay-loader: 26;
}
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
   */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  font-size: 100%;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img {
  max-width: 100%;
  height: auto;
}
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  /* 1 */
  overflow: visible;
  /* 1 */
  height: 0;
  box-sizing: content-box;
  /* 2 */
}
/**
 * Remove the gray background on active links in IE 10.
 */
a,
button,
label,
input,
select {
  -webkit-tap-highlight-color: transparent;
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  position: relative;
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  /* 1 */
  margin: 0;
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 2 */
}
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input[type=submit] {
  border: none;
  cursor: pointer;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
button,
input {
  /* 1 */
  overflow: visible;
}
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}
/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}
/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px solid ButtonText;
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  /* 1 */
  padding: 0;
  box-sizing: border-box;
  /* 2 */
}
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}
/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}
[hidden] {
  display: none;
}
/**
 * Hide arrows on input[number]
 */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
/**
 * Base: Typography
 * -----------------------------------------------------------------------------
 * Styles for displaying content with some of the most commonly used HTML elements,
 * including normalization, typography, images, tables, and more.
 *
 */
body,
html {
  font-family: var(--base-font-family);
  font-size: var(--body-font-size);
  color: var(--color-text-primary);
}
.text {
  font-family: var(--base-font-family);
  font-size: var(--body-font-size);
  color: var(--color-text-primary);
}
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  color: var(--color-heading);
  text-transform: var(--heading-text-transform);
  
}
h1,
.h1 {
  font-size: calc(var(--heading-font-size) * 2.25);
  line-height: 1.33;
}
@media (min-width: 768px) {
  h1,
  .h1 {
    font-size: calc(var(--heading-font-size) * 2.5);
  }
}
@media (min-width: 1200px) {
  h1,
  .h1 {
    font-size: calc(var(--heading-font-size) * 5);
    line-height: 1.25;
  }
}
h2,
.h2 {
  font-size: calc(var(--heading-font-size) * 1.75);
  line-height: 1.25;
}
@media (min-width: 768px) {
  h2,
  .h2 {
    font-size: calc(var(--heading-font-size) * 2);
  }
}
@media (min-width: 1200px) {
  h2,
  .h2 {
    font-size: calc(var(--heading-font-size) * 4);
  }
}
h3,
.h3 {
  font-size: calc(var(--heading-font-size) * 1.375);
  line-height: 1.27;
}
@media (min-width: 768px) {
  h3,
  .h3 {
    font-size: calc(var(--heading-font-size) * 1.625);
  }
}
@media (min-width: 1200px) {
  h3,
  .h3 {
    font-size: calc(var(--heading-font-size) * 2.75);
    line-height: 1.27;
  }
}
h4,
.h4 {
  font-size: calc(var(--heading-font-size) * 1.125);
  line-height: 1.22;
}
@media (min-width: 1200px) {
  h4,
  .h4 {
    font-size: calc(var(--heading-font-size) * 2);
    line-height: 1.5;
  }
}
h5,
.h5 {
  font-size: calc(var(--heading-font-size) * 1);
  line-height: 1.22;
}
@media (min-width: 768px) {
  h5,
  .h5 {
    font-size: calc(var(--heading-font-size) * 1.0625);
  }
}
@media (min-width: 1200px) {
  h5,
  .h5 {
    font-size: calc(var(--heading-font-size) * 1.125);
  }
}
h6,
.h6 {
  font-size: calc(var(--heading-font-size) * 0.95);
  line-height: 1.22;
}
@media (min-width: 768px) {
  h6,
  .h6 {
    font-size: calc(var(--heading-font-size) * 1);
  }
}
@media (min-width: 1200px) {
  h6,
  .h6 {
    font-size: calc(var(--heading-font-size) * 1);
  }
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: end;
}
* {
  outline: none;
  box-sizing: border-box;
}
html,
body {
  background-color: #fff;
  scroll-behavior: var(--smooth-scroll, auto);
}
html {
  scroll-padding-top: var(--header-height-sticky, 0);
}
html:has(body.scroll-padding-0) {
  scroll-padding: 0;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--color-background);
}
body .transition {
  transition-property: opacity;
  transition-timing-function: ease;
  transition-duration: 0.3s;
}
body.rtl {
  direction: rtl;
}
body.rtl .icon.icon--rtl {
  transform: scale(-1);
}
a {
  color: var(--link-color);
}
.content {
  flex: 1 0 auto;
}
.visually-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0 0 0 0);
}
picture img {
  opacity: 1;
  transition-property: opacity;
  transition-duration: 0.5s;
}
.lazy img {
  opacity: 0;
  transition-duration: 0.5s;
  transition-property: opacity;
}
.opacity-0 {
  opacity: 0;
}
button {
  background-color: transparent;
}
.form-status {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.form-status svg {
  margin-inline-end: 5px;
}
.form__message {
  margin: 15px 0;
  color: var(--color-text-secondary);
}
.form-status-list {
  margin-bottom: 30px;
}
.form-status-list li {
  margin: 10px 0;
}
.form-status-list a {
  color: var(--link-color);
}
.form-status-list a:focus-visible {
  outline: 1px solid var(--color-text-primary);
}
html.no-js .no-js-hidden {
  display: none;
}
.no-js .lazy {
  display: none !important;
}
.focus-visible-outline:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 2px;
}
.error {
  color: var(--color-text-attention, #b00020);
}
.error li + li {
  margin-top: 10px;
}
.success {
  color: var(--color-text-success, #198754);
}
.template-customers .content {
  display: flex;
  flex-direction: column;
}
.is-hidden {
  display: none !important;
}
.loader {
  position: absolute;
  top: calc(50% - 18px);
  left: calc(50% - 18px);
  width: 36px;
  height: 36px;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid #fff;
  border-bottom-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.password-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.password-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
[data-shopify=payment-button] .shopify-payment-button__button--hidden {
  display: none;
}
[data-shopify=payment-button] .shopify-payment-button__more-options:focus-visible {
  outline: 2px solid var(--color-text-primary);
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.container {
  max-width: var(--container-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 1200px) {
  .container {
    padding-left: 60px;
    padding-right: 60px;
  }
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  body * {
    scrollbar-width: thin;
  }
  body *::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  body *::-webkit-scrollbar-thumb {
    border-radius: 10px;
  }
}
.skip-content-link {
  top: 4px;
  left: 4px;
  opacity: 0;
  padding: 6px;
  background-color: var(--color-background);
  clip: rect(0 0 0 0);
  transition-property: opacity;
  transition-duration: var(--timing-short);
  transition-timing-function: var(--easing-linear);
}
.skip-content-link:focus-visible {
  z-index: 999;
  opacity: 1;
  width: unset;
  height: unset;
  margin: unset;
  clip: unset;
  outline: 2px solid var(--color-text-primary);
}
body.blur-content {
  overflow-x: hidden;
}
body.blur-content .announcement-bar,
body.blur-content .header,
body.blur-content main,
body.blur-content .footer {
  overflow-x: hidden;
  filter: blur(7px);
}
body.blur-content main {
  overflow-x: hidden;
}
.section-bottom-rounded {
  border-bottom-left-radius: 65px;
  border-bottom-right-radius: 65px;
}
@media (min-width: 1200px) {
  .section-bottom-rounded {
    border-bottom-left-radius: 140px;
    border-bottom-right-radius: 140px;
  }
}
.tr-del-0-25 {
  transition-delay: 0.25s;
}
.tr-del-0-3 {
  transition-delay: 0.3s;
}
.tr-del-0-4 {
  transition-delay: 0.4s;
}
.tr-del-0-5 {
  transition-delay: 0.5s;
}
.tr-del-0-75 {
  transition-delay: 0.75s;
}
.tr-del-1 {
  transition-delay: 1s;
}
.tr-del-1-25 {
  transition-delay: 1.25s;
}
.tr-del-1-5 {
  transition-delay: 1.5s;
}
.tr-del-2 {
  transition-delay: 2s;
}
.tr-dur-0-3 {
  transition-duration: 0.3s;
}
.tr-dur-0-4 {
  transition-duration: 0.4s;
}
.tr-dur-0-5 {
  transition-duration: 0.5s;
}
.tr-dur-0-75 {
  transition-duration: 0.75s;
}
.tr-dur-0-8 {
  transition-duration: 0.8s;
}
.tr-dur-1 {
  transition-duration: 1s;
}
.tr-dur-1-2 {
  transition-duration: 1.2s;
}
.tr-dur-1-5 {
  transition-duration: 1.5s;
}
.tr-dur-2 {
  transition-duration: 2s;
}
@keyframes fadeInBottom {
  0% {
    bottom: 0;
    opacity: 0;
  }
  100% {
    bottom: 16px;
    opacity: 1;
  }
}
@keyframes fadeInTopReminder {
  0% {
    top: 0;
    opacity: 0;
  }
  100% {
    top: calc(26px + var(--header-height) + var(--header-offset-top));
    opacity: 1;
  }
}
@keyframes fadeInTopReminderMobile {
  0% {
    top: 0;
    opacity: 0;
  }
  100% {
    top: calc(16px + var(--header-height) + var(--header-offset-top));
    opacity: 1;
  }
}
@keyframes fadeInBottomHigh {
  0% {
    bottom: 50px;
    opacity: 0;
  }
  100% {
    bottom: 70px;
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeInUpBounce {
  0% {
    opacity: 0;
    transform: translateY(-80px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes tickerAnimate {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
/**
 * Base: Form
 * -----------------------------------------------------------------------------
 * Form resets, browser normalizing and base styling.
 *
 */
form {
  margin: 0;
}
fieldset,
.fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
legend {
  margin: 0;
  padding: 0;
}
a,
area,
button,
[role=button],
input,
label,
select,
summary,
textarea {
  font-family: inherit;
  touch-action: manipulation;
}
input[disabled],
textarea[disabled],
select[disabled] {
  cursor: default;
}
button,
input[type=submit],
label[for] {
  cursor: pointer;
}
select::-ms-expand {
  display: none;
}
/**
 * Force option color (affects IE only).
 */
label {
  display: inline-block;
}
.button {
  position: relative;
  z-index: 1;
  display: inline-block;
  min-width: 190px;
  margin: 10px;
  padding: 12px 18px;
  border: 1px solid;
  font-family: var(--button-font-family);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: 1.5;
  text-align: center;
  word-break: break-word;
  border-radius: 4px;
  text-decoration: none;
  text-transform: var(--button-text-transform);
  backdrop-filter: blur(24px);
  transition-property: opacity, color, border-color, background;
  transition-duration: var(--timing-base);
}
.button .button__outer {
  position: absolute;
  z-index: -1;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 10px;
  border: 1px solid var(--button-border-outer-alpha-color-primary);
}
.button .button__outer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  display: inline-block;
  width: 22px;
  height: 22px;
  border-top: 2px solid var(--button-border-outer-color-primary);
  border-left: 2px solid var(--button-border-outer-color-primary);
  border-top-left-radius: 10px;
  transition-duration: 0.4s, 0.4s, 0.4s, 0s;
  transition-property: transform, left, border-left-color, border-top-left-radius;
  transition-delay: 0s, 0s, 0.3s, 0.3s;
}
.button .button__outer::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  display: inline-block;
  width: 22px;
  height: 22px;
  border-bottom: 2px solid var(--button-border-outer-color-primary);
  border-right: 2px solid var(--button-border-outer-color-primary);
  border-bottom-right-radius: 10px;
  transition-duration: 0.4s, 0.4s, 0.4s, 0s;
  transition-property: transform, right, border-right-color, border-bottom-right-radius;
  transition-delay: 0s, 0s, 0.3s, 0.3s;
}
.button.button--custom {
  display: flex;
  align-content: center;
  justify-content: center;
  gap: 12px;
  border-color: var(--border-color);
  background: var(--background-color);
  color: var(--text-color);
}
.button.button--custom .icon {
  width: 24px;
  height: 22px;
}
.button.button--custom:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .button.button--custom:hover {
    border-color: var(--text-color-hover);
    background: var(--background-color-hover);
    color: var(--text-color-hover);
  }
  .button.button--custom:hover .button__outer {
    border-color: var(--text-color-hover);
  }
  .button.button--custom:hover .button__outer::before {
    left: 50%;
    border-top-color: var(--border-outer-color-hover);
    border-left-color: transparent;
    border-top-left-radius: 0;
    transform: translateX(-50%);
    transition-duration: 0.4s, 0.4s, 0s, 0.4s;
    transition-delay: 0s, 0s, 0s, 0s;
  }
  .button.button--custom:hover .button__outer::after {
    right: 50%;
    border-bottom-color: var(--border-outer-color-hover);
    border-right-color: transparent;
    border-bottom-right-radius: 0;
    transform: translateX(50%);
    transition-duration: 0.4s, 0.4s, 0s, 0.4s;
    transition-delay: 0s, 0s, 0s, 0s;
  }
}
.button.button--primary {
  border-color: var(--button-border-color-primary);
  background: var(--button-background-color-primary);
  color: var(--button-text-color-primary);
}
section.animated .button.button--primary.need-animate:not(.disabled):not([disabled]) {
  opacity: 1;
  animation: simulateHover 3s 1 ease-in-out;
}
section.animated .button.button--primary.need-animate:not(.disabled):not([disabled]) .button__outer {
  animation: simulateOuterBorderHover 3s 1 ease-in-out;
}
section.animated .button.button--primary.need-animate:not(.disabled):not([disabled]) .button__outer::before {
  animation: simulateOuterBeforeHover 3s 1 ease-in-out;
}
section.animated .button.button--primary.need-animate:not(.disabled):not([disabled]) .button__outer::after {
  animation: simulateOuterAfterHover 3s 1 ease-in-out;
}
.button.button--primary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .button.button--primary:hover {
    border-color: var(--button-border-color-primary-hover);
    background: var(--button-background-color-primary-hover);
    color: var(--button-text-color-primary-hover);
  }
  .button.button--primary:hover .button__outer {
    border-color: var(--button-border-outer-alpha-color-primary-hover);
  }
  .button.button--primary:hover .button__outer::before {
    left: 50%;
    border-top-color: var(--button-border-outer-color-primary-hover);
    border-left-color: transparent;
    border-top-left-radius: 0;
    transform: translateX(-50%);
    transition-duration: 0.4s, 0.4s, 0s, 0.4s;
    transition-delay: 0s, 0s, 0s, 0s;
  }
  .button.button--primary:hover .button__outer::after {
    right: 50%;
    border-bottom-color: var(--button-border-outer-color-primary-hover);
    border-right-color: transparent;
    border-bottom-right-radius: 0;
    transform: translateX(50%);
    transition-duration: 0.4s, 0.4s, 0s, 0.4s;
    transition-delay: 0s, 0s, 0s, 0s;
  }
}
.button.button--with-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.button.button--with-icon .icon {
  width: 16px;
  height: 16px;
  margin-inline-end: 8px;
}
.button.button--small {
  padding: 8px 16px;
  font-size: calc(var(--body-font-size) * 0.875);
  line-height: 1.285;
}
.button.button--no-min-width {
  min-width: auto;
}
.button.button--block {
  width: 100%;
}
.button.disabled, .button[disabled] {
  opacity: 0.7;
  cursor: default;
  pointer-events: none;
}
.button.button--full-width {
  width: 100%;
}
@keyframes simulateHover {
  0%, 100% {
    border-color: var(--button-border-color-primary);
    background: var(--button-background-color-primary);
    color: var(--button-text-color-primary);
  }
  50% {
    border-color: var(--button-border-color-primary-hover);
    background: var(--button-background-color-primary-hover);
    color: var(--button-text-color-primary-hover);
  }
}
@keyframes simulateHover {
  0%, 20% {
    border-color: var(--button-border-color-primary);
    background: var(--button-background-color-primary);
    color: var(--button-text-color-primary);
  }
  50% {
    border-color: var(--button-border-color-primary-hover);
    background: var(--button-background-color-primary-hover);
    color: var(--button-text-color-primary-hover);
  }
  80%, 100% {
    border-color: var(--button-border-color-primary);
    background: var(--button-background-color-primary);
    color: var(--button-text-color-primary);
  }
}
@keyframes simulateOuterBeforeHover {
  0%, 20% {
    left: -1px;
    border-top-color: var(--button-border-outer-color-primary);
    border-left-color: var(--button-border-outer-color-primary);
    border-top-left-radius: 10px;
    transform: translateX(0);
  }
  21%, 79% {
    border-left-color: transparent;
  }
  50% {
    left: 50%;
    border-top-color: var(--button-border-outer-color-primary-hover);
    border-left-color: transparent;
    border-top-left-radius: 0;
    transform: translateX(-50%);
  }
  80%, 100% {
    left: -1px;
    border-top-color: var(--button-border-outer-color-primary);
    border-left-color: var(--button-border-outer-color-primary);
    border-top-left-radius: 10px;
    transform: translateX(0);
  }
}
@keyframes simulateOuterAfterHover {
  0%, 20% {
    right: -1px;
    border-bottom-color: var(--button-border-outer-color-primary);
    border-right-color: var(--button-border-outer-color-primary);
    border-bottom-right-radius: 10px;
    transform: translateX(0);
  }
  21%, 79% {
    border-right-color: transparent;
  }
  50% {
    right: 50%;
    border-bottom-color: var(--button-border-outer-color-primary-hover);
    border-right-color: transparent;
    border-bottom-right-radius: 0;
    transform: translateX(50%);
  }
  80%, 100% {
    right: -1px;
    border-bottom-color: var(--button-border-outer-color-primary);
    border-right-color: var(--button-border-outer-color-primary);
    border-bottom-right-radius: 10px;
    transform: translateX(0);
  }
}
@keyframes simulateOuterBorderHover {
  0%, 20% {
    border-color: var(--button-border-outer-alpha-color-primary);
  }
  50% {
    border-color: var(--button-border-outer-alpha-color-primary-hover);
  }
  80%, 100% {
    border-color: var(--button-border-outer-alpha-color-primary);
  }
}
.button-simple {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 15px 32px;
  border: 1px solid var(--button-border-color-secondary);
  border-radius: 4px;
  font-family: var(--button-font-family);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: 1.5;
  text-align: center;
  word-break: break-word;
  text-decoration: none;
  text-transform: var(--button-text-transform);
  transition-property: color, background-color, border-color;
  transition-duration: var(--timing-base);
}
.button-simple .icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.button-simple::before {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  width: 150%;
  height: 200%;
  transform: translate3d(0, 90%, 0);
  transition-property: transform;
  transition-duration: var(--animate-time);
}
.button-simple.button-simple--primary {
  background-color: var(--button-background-color-secondary);
  color: var(--button-text-color-secondary);
}
.button-simple.button-simple--primary::before {
  background-color: var(--button-background-color-secondary-hover);
}
.button-simple.button-simple--primary:focus-visible {
  outline: 2px solid var(--button-background-color-secondary);
  outline-offset: 2px;
}
.button-simple.button-simple--custom {
  display: flex;
  align-content: center;
  justify-content: center;
  column-gap: 12px;
  border-color: var(--border-color);
  background: var(--background-color);
  color: var(--text-color);
}
.button-simple.button-simple--custom::before {
  background-color: var(--background-color-hover);
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .button-simple.button-simple--custom:hover {
    border-color: var(--border-color-hover);
    color: var(--text-color-hover);
    border-color: var(--border-color-hover);
  }
}
.button-simple.button-simple--custom:focus-visible {
  outline: 2px solid var(--button-background-color-secondary);
  outline-offset: 2px;
}
.button-simple.button-simple--full-width {
  width: 100%;
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .button-simple:hover::before {
    transform: translate3d(0, 0%, 0);
  }
  .button-simple:hover.button-simple--primary {
    border-color: var(--button-border-color-secondary-hover);
    color: var(--button-text-color-secondary-hover);
  }
}
.button-simple.disabled, .button-simple[disabled] {
  opacity: 0.7;
  cursor: default;
  pointer-events: none;
}
.button-link {
  display: inline-flex;
  align-items: center;
  padding-bottom: 2px;
  padding-left: 0;
  padding-right: 0;
  border: none;
  line-height: 1.5;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-text-primary);
  text-align: start;
  word-break: break-word;
  gap: 10px;
}
.button-link [data-text] {
  position: relative;
  display: block;
  overflow: hidden;
}
.button-link [data-text]::after {
  content: attr(data-text);
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}
.button-link [data-text]::after,
.button-link .button-link__text {
  display: block;
  width: 100%;
  overflow: hidden;
  transform: translateY(0);
  transition-property: transform;
  transition-duration: var(--timing-base);
}
.button-link .button-link__pre-icon {
  flex-shrink: 0;
}
.button-link .button-link__icons {
  position: relative;
  display: flex;
  flex-shrink: 0;
}
.button-link .icon {
  width: 16px;
  height: 16px;
  transition-property: transform, opacity;
  transition-duration: var(--timing-base);
}
.button-link .icon-hover {
  position: absolute;
  top: 50%;
  right: 0;
  opacity: 0;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
}
.button-link.button-link--full-width {
  width: 100%;
  gap: 16px;
}
.button-link.button-link--full-width .button-link__icons {
  margin-inline-start: auto;
}
.button-link.disabled, .button-link[disabled] {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
}
.button-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .button-link:hover .button-link__text,
  .button-link:hover [data-text]::after {
    transform: translateY(-100%);
  }
  .button-link:hover .icon-base {
    transform: translateX(4px);
  }
  .button-link:hover .icon-hover {
    opacity: 1;
    transform: translateY(-50%) translateX(-4px);
  }
}
.simple-link {
  display: inline-flex;
  align-items: center;
  padding: 0;
  font-size: calc(var(--body-font-size) * 0.875);
  border-bottom: 1px solid var(--color-text-primary);
  line-height: 1.28;
  font-weight: normal;
  text-decoration: none;
  color: var(--color-text-primary);
  gap: 8px;
  word-break: break-word;
  transition-property: border-color;
  transition-duration: var(--timing-base);
}
.simple-link .simple-link__icon {
  width: 24px;
  height: 24px;
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .simple-link:hover {
    border-bottom-color: transparent;
  }
}
body.rtl .button-link .icon-hover {
  transform: scale(-1) translateY(50%);
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  body.rtl .button-link:hover .icon-base {
    transform: scale(-1) translateX(4px);
  }
  body.rtl .button-link:hover .icon-hover {
    transform: scale(-1) translateY(50%) translateX(-4px);
  }
}
.button-icon {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 56px;
  padding: 6px;
  color: var(--button-icon-text-color);
  border: 1px solid var(--button-icon-border-outer-alpha-color);
  border-radius: calc(var(--global-border-radius) / 2);
  transition-property: color, border-color;
  transition-duration: var(--timing-base);
}
.button-icon.button-icon--no-decoration::after {
  content: none;
}
.button-icon::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  display: inline-block;
  width: 18px;
  height: 18px;
  border-bottom: 2px solid var(--button-icon-border-outer-color);
  border-right: 2px solid var(--button-icon-border-outer-color);
  border-bottom-right-radius: 10px;
  transition-duration: 0.4s, 0.4s, 0.15s, 0s;
  transition-property: transform, right, border-right-color, border-bottom-right-radius;
  transition-delay: 0s, 0s, 0.25s, 0.25s;
}
.button-icon .button-icon__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--global-border-radius) / 4);
  border: 1px solid var(--button-icon-border-color);
  background-color: var(--button-icon-background-color);
  backdrop-filter: blur(24px);
  color: var(--button-icon-text-color);
  transition-property: color, border-color, background-color;
  transition-duration: var(--timing-base);
}
.button-icon .button-icon__inner .icon {
  width: 20px;
  height: 20px;
}
.button-icon .button-icon__counter {
  position: absolute;
  top: -4px;
  right: -4px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 10px;
  font-size: calc(var(--body-font-size) * 0.625);
  line-height: 1;
  color: var(--button-icon-counter-text-color);
  background-color: var(--button-icon-counter-background-color);
  transition-property: color, background-color;
  transition-duration: var(--timing-base);
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .button-icon:hover {
    border-color: var(--button-icon-border-outer-alpha-color-hover);
  }
  .button-icon:hover .button-icon__inner {
    border-color: var(--button-icon-border-color-hover);
    background: var(--button-icon-background-color-hover);
    color: var(--button-icon-text-color-hover);
  }
  .button-icon:hover .button-icon__counter {
    color: var(--button-icon-counter-text-color-hover);
    background-color: var(--button-icon-counter-background-color-hover);
  }
  .button-icon:hover::after {
    right: 50%;
    border-bottom-color: var(--button-icon-border-outer-color-hover);
    border-right-color: transparent;
    border-bottom-right-radius: 0;
    transform: translateX(50%);
    transition-duration: 0.4s, 0.4s, 0s, 0.15s;
    transition-delay: 0s, 0s, 0s, 0s;
  }
}
.button-icon:focus-visible .button-icon__inner {
  outline: 2px solid var(--button-icon-border-outer-color);
  outline-offset: 1px;
}
.button-icon.disabled, .button-icon[disabled] {
  opacity: 0.7;
  cursor: default;
  pointer-events: none;
}
.button-icon-circle {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--button-icon-circle-text-color);
  transition-duration: var(--timing-base);
  transition-property: color;
  border-radius: 50%;
}
.button-icon-circle .icon {
  width: 24px;
  height: 24px;
}
.button-icon-circle .icon.icon-circle-decoration-border {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
  height: auto;
}
.button-icon-circle .icon.icon-circle-decoration-border circle {
  opacity: 0;
  stroke-dashoffset: 220;
  stroke-dasharray: 300;
  transform: rotate(600deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.8s ease, transform 0.8s ease, fill 0.8s ease, opacity 0.5s ease;
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .button-icon-circle:hover {
    color: var(--button-icon-circle-text-color-hover);
  }
  .button-icon-circle:hover .icon-circle-decoration-border circle {
    opacity: 1;
    stroke-dashoffset: 0;
    transform: rotate(180deg);
  }
}
.button-icon-circle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}
.button-icon-circle.disabled, .button-icon-circle[disabled] {
  opacity: 0.7;
  cursor: default;
  pointer-events: none;
}
.tag-button {
  position: relative;
  padding: 7px 12px;
  border: 1px solid var(--color-border-button-option);
  color: var(--color-button-option);
  background: var(--background-button-option);
  border-radius: calc(var(--global-border-radius) / 2);
  font-size: calc(var(--body-font-size) * 0.875);
  line-height: 1.71;
  text-decoration: none;
}
.tag-button::before, .tag-button::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0;
  height: 2px;
  transform: translateX(-50%);
  background-color: var(--color-button-option-hover);
  transition: width var(--timing-base) ease-in-out;
}
.tag-button::before {
  top: -1px;
}
.tag-button::after {
  bottom: -1px;
}
.tag-button.is-active {
  color: var(--color-button-option-hover);
  border-color: var(--color-border-button-option-hover);
  background: var(--background-button-option-hover);
  transition-property: background, border-color, color;
  transition-duration: var(--timing-base);
}
.tag-button.is-active::before, .tag-button.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0;
  height: 2px;
  transform: translateX(-50%);
  background-color: var(--color-button-option-hover);
  transition: width var(--timing-base) ease-in-out;
}
.tag-button.is-active:before {
  top: -1px;
}
.tag-button.is-active:after {
  bottom: -1px;
}
.tag-button.is-active:before, .tag-button.is-active:after {
  width: 14.2%;
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .tag-button:hover {
    color: var(--color-button-option-hover);
    border-color: var(--color-border-button-option-hover);
    background: var(--background-button-option-hover);
    transition-property: background, border-color, color;
    transition-duration: var(--timing-base);
  }
  .tag-button:hover::before, .tag-button:hover::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 0;
    height: 2px;
    transform: translateX(-50%);
    background-color: var(--color-button-option-hover);
    transition: width var(--timing-base) ease-in-out;
  }
  .tag-button:hover:before {
    top: -1px;
  }
  .tag-button:hover:after {
    bottom: -1px;
  }
  .tag-button:hover:before, .tag-button:hover:after {
    width: 14.2%;
  }
}
.button-circle {
  display: inline-block;
  width: 56px;
  height: 56px;
  padding: 5px;
  border-radius: 50%;
  border: 1px solid var(--button-border-outer-color-circle);
  background: var(--button-background-color-circle);
  color: var(--button-icon-color-circle);
  backdrop-filter: blur(24px);
  transition-property: color, background, border-color;
  transition-duration: var(--timing-base);
  flex-shrink: 0;
}
.button-circle.button-circle--small {
  width: 48px;
  height: 48px;
}
.button-circle .button-circle__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid var(--button-border-color-circle);
  transition-property: border-color;
  transition-duration: var(--timing-base);
}
.button-circle .button-circle__inner .icon {
  width: 20px;
  height: 20px;
}
.button-circle .button-circle__inner .icon.icon-circle-decoration {
  position: absolute;
  top: -2px;
  bottom: -2px;
  right: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  color: var(--button-icon-color-circle);
  transition-property: color, transform, opacity;
  transition-duration: var(--timing-base);
}
.button-circle .button-circle__inner .icon.icon-inactive, .button-circle .button-circle__inner .icon.icon-active {
  position: absolute;
  transition-property: opacity, visibility;
  transition-duration: var(--timing-base);
}
.button-circle .button-circle__inner .icon.icon-inactive {
  opacity: 1;
  visibility: visible;
}
.button-circle .button-circle__inner .icon.icon-active {
  opacity: 0;
  visibility: hidden;
}
.button-circle .button-circle__text {
  overflow: hidden;
  display: -webkit-box;
  opacity: 0;
  max-width: 0;
  transition-duration: 0s, var(--timing-base), var(--timing-base);
  transition-property: opacity, max-width, padding;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.button-circle.button-circle--transform {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 56px;
  text-decoration: none;
  border-radius: 100px;
  text-align: center;
  word-break: break-word;
}
.button-circle.button-circle--transform .button-circle__inner {
  position: absolute;
  width: auto;
  height: auto;
  top: 4px;
  bottom: 4px;
  left: 4px;
  right: 4px;
  border-radius: 100px;
}
.button-circle.button-circle--transform .button-circle__inner::before, .button-circle.button-circle--transform .button-circle__inner::after {
  content: "";
  position: absolute;
  left: 50%;
  opacity: 0;
  width: 0px;
  height: 2px;
  background-color: var(--button-icon-color-circle-hover);
  transform: translateX(-50%) scale(-1);
  transition-property: opacity, width;
  transition-duration: var(--timing-base);
}
.button-circle.button-circle--transform .button-circle__inner::before {
  top: -2px;
}
.button-circle.button-circle--transform .button-circle__inner::after {
  bottom: -2px;
}
@media (min-width: 1200px) {
  .button-circle.button-circle--transform:focus-visible {
    background: var(--button-background-color-circle-hover);
    border-color: var(--button-border-outer-color-circle-hover);
    color: var(--button-icon-color-circle-hover);
    max-width: 300px;
  }
  .button-circle.button-circle--transform:focus-visible .button-circle__inner {
    border-color: var(--button-border-color-circle-hover);
  }
  .button-circle.button-circle--transform:focus-visible .button-circle__inner .icon.icon-circle-decoration {
    color: var(--button-icon-color-circle-hover);
    transform: rotate(45deg);
  }
  .button-circle.button-circle--transform:focus-visible .icon {
    opacity: 0;
  }
  .button-circle.button-circle--transform:focus-visible .button-circle__inner::before, .button-circle.button-circle--transform:focus-visible .button-circle__inner::after {
    opacity: 1;
    width: 24px;
  }
  .button-circle.button-circle--transform:focus-visible .button-circle__text {
    opacity: 1;
    max-width: 300px;
    padding: 0 25px;
    transition-duration: var(--timing-base), var(--timing-base), var(--timing-base);
    transition-delay: calc(var(--animate-delay) * 0.5), 0s, 0s;
  }
}
@media (-moz-touch-enabled: 0) and (min-width: 1200px), (hover: hover) and (min-width: 1200px), (pointer: fine) and (min-width: 1200px) {
  .button-circle.button-circle--transform:hover {
    background: var(--button-background-color-circle-hover);
    border-color: var(--button-border-outer-color-circle-hover);
    color: var(--button-icon-color-circle-hover);
    max-width: 300px;
  }
  .button-circle.button-circle--transform:hover .button-circle__inner {
    border-color: var(--button-border-color-circle-hover);
  }
  .button-circle.button-circle--transform:hover .button-circle__inner .icon.icon-circle-decoration {
    color: var(--button-icon-color-circle-hover);
    transform: rotate(45deg);
  }
  .button-circle.button-circle--transform:hover .icon {
    opacity: 0;
  }
  .button-circle.button-circle--transform:hover .button-circle__inner::before, .button-circle.button-circle--transform:hover .button-circle__inner::after {
    opacity: 1;
    width: 24px;
  }
  .button-circle.button-circle--transform:hover .button-circle__text {
    opacity: 1;
    max-width: 300px;
    padding: 0 25px;
    transition-duration: var(--timing-base), var(--timing-base), var(--timing-base);
    transition-delay: calc(var(--animate-delay) * 0.5), 0s, 0s;
  }
}
.button-circle:focus-visible {
  background: var(--button-background-color-circle-hover);
  border-color: var(--button-border-outer-color-circle-hover);
  color: var(--button-icon-color-circle-hover);
  outline: 2px solid var(--button-icon-color-circle);
  outline-offset: 1px;
}
.button-circle:focus-visible .button-circle__inner {
  border-color: var(--button-border-color-circle-hover);
}
.button-circle:focus-visible .button-circle__inner .icon.icon-circle-decoration {
  color: var(--button-icon-color-circle-hover);
  transform: rotate(45deg);
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .button-circle:hover:not([disabled]) {
    background: var(--button-background-color-circle-hover);
    border-color: var(--button-border-outer-color-circle-hover);
    color: var(--button-icon-color-circle-hover);
  }
  .button-circle:hover:not([disabled]) .button-circle__inner {
    border-color: var(--button-border-color-circle-hover);
  }
  .button-circle:hover:not([disabled]) .button-circle__inner .icon.icon-circle-decoration {
    color: var(--button-icon-color-circle-hover);
    transform: rotate(45deg);
  }
  .button-circle:hover[disabled].button-circle--transform {
    background: var(--button-background-color-circle-hover);
    border-color: var(--button-border-outer-color-circle-hover);
    color: var(--button-icon-color-circle-hover);
  }
  .button-circle:hover[disabled].button-circle--transform .button-circle__inner {
    border-color: var(--button-border-color-circle-hover);
  }
  .button-circle:hover[disabled].button-circle--transform .button-circle__inner .icon.icon-circle-decoration {
    color: var(--button-icon-color-circle-hover);
    transform: rotate(45deg);
  }
}
.button-circle.is-active {
  background: var(--button-background-color-circle-hover);
  border-color: var(--button-border-outer-color-circle-hover);
  color: var(--button-icon-color-circle-hover);
}
.button-circle.is-active .button-circle__inner {
  border-color: var(--button-border-color-circle-hover);
}
.button-circle.is-active .button-circle__inner .icon.icon-circle-decoration {
  color: var(--button-icon-color-circle-hover);
  transform: rotate(45deg);
  opacity: 0;
}
.button-circle.is-active .button-circle__inner .icon.icon-inactive {
  opacity: 0;
  visibility: hidden;
}
.button-circle.is-active .button-circle__inner .icon.icon-active {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 1199.98px) {
  .button-circle.button-circle--transform.button-circle--transform-show-text-mob {
    background: var(--button-background-color-circle-hover);
    border-color: var(--button-border-outer-color-circle-hover);
    color: var(--button-icon-color-circle-hover);
  }
  .button-circle.button-circle--transform.button-circle--transform-show-text-mob .button-circle__inner {
    border-color: var(--button-border-color-circle-hover);
  }
  .button-circle.button-circle--transform.button-circle--transform-show-text-mob .button-circle__inner .icon.icon-circle-decoration {
    color: var(--button-icon-color-circle-hover);
    transform: rotate(45deg);
  }
  .button-circle.button-circle--transform.button-circle--transform-show-text-mob .icon {
    opacity: 0;
  }
  .button-circle.button-circle--transform.button-circle--transform-show-text-mob .button-circle__inner::before, .button-circle.button-circle--transform.button-circle--transform-show-text-mob .button-circle__inner::after {
    opacity: 1;
    width: 24px;
  }
  .button-circle.button-circle--transform.button-circle--transform-show-text-mob .button-circle__text {
    opacity: 1;
    max-width: 300px;
    padding: 0 20px;
    transition-duration: var(--timing-base), var(--timing-base), var(--timing-base);
  }
}
.button-circle.disabled, .button-circle[disabled] {
  opacity: 0.7;
  cursor: default;
}
.button-circle-trigger.is-active .button-circle {
  background: var(--button-background-color-circle-hover);
  border-color: var(--button-border-outer-color-circle-hover);
  color: var(--button-icon-color-circle-hover);
}
.button-circle-trigger.is-active .button-circle .button-circle__inner {
  border-color: var(--button-border-color-circle-hover);
}
.button-circle-trigger.is-active .button-circle .button-circle__inner .icon.icon-circle-decoration {
  color: var(--button-icon-color-circle-hover);
  transform: rotate(45deg);
  opacity: 0;
}
.button-circle-trigger.is-active .button-circle .button-circle__inner .icon.icon-inactive {
  opacity: 0;
  visibility: hidden;
}
.button-circle-trigger.is-active .button-circle .button-circle__inner .icon.icon-active {
  opacity: 1;
  visibility: visible;
}
.flashlight-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}
.flashlight-container__effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--flashlight-color, #538BF6);
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
  filter: blur(90px);
  transition-property: width, height;
  transition-duration: var(--timing-base);
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .flashlight-container--hover-container:hover .flashlight-container__effect {
    width: 180px;
    height: 180px;
  }
}
@media (min-width: 1200px) {
  .flashlight-container__effect {
    filter: blur(135px);
  }
}
.button-social {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border: none;
  background-color: transparent;
  color: var(--button-icon-color-social);
  fill: var(--button-icon-color-social);
  text-decoration: none;
  transition-property: color, border-color, background-color;
  transition-duration: var(--timing-base);
}
.button-social .icon {
  width: 24px;
  height: 24px;
}
.button-social .button-social__circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.button-social .button-social__circle circle {
  opacity: 0;
  stroke-dashoffset: 220;
  stroke-dasharray: 300;
  transform: rotate(600deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.8s ease, transform 0.8s ease, fill 0.8s ease, opacity 0.5s ease;
}
.button-social .tooltip {
  z-index: 2;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  opacity: 0;
  visibility: hidden;
  padding: 8px;
  border-radius: 6px;
  background-color: #000;
  color: #fff;
  white-space: nowrap;
  font-size: 14px;
  transform: translateX(-50%);
  transition: 0.5s all;
}
.button-social .tooltip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-inline-start: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #000 transparent transparent transparent;
}
.button-social:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.button-social:focus-visible.is-active .tooltip {
  opacity: 1;
  visibility: visible;
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .button-social:hover {
    color: var(--button-icon-color-social-hover);
    fill: var(--button-icon-color-social-hover);
  }
  .button-social:hover .button-social__circle circle {
    opacity: 1;
    stroke-dashoffset: 0;
    transform: rotate(180deg);
  }
  .button-social:hover.is-active .tooltip {
    opacity: 1;
    visibility: visible;
  }
}
.swiper-button {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  color: var(--color-slider-arrow-icon);
  border-radius: 0;
  transition-property: color, fill, border-color, background-color;
  transition-timing-function: var(--easing-ease);
  transition-duration: var(--timing-base);
}
.swiper-button::before, .swiper-button::after {
  display: none;
  content: none;
}
.swiper-button .icon {
  width: 100%;
  height: 100%;
  transition-property: transform, opacity;
  transition-duration: var(--timing-base);
}
.swiper-button .icon-hover {
  position: absolute;
  top: 50%;
  opacity: 0;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
}
.swiper-button.swiper-button--prev {
  left: 0;
}
.swiper-button.swiper-button--prev .icon-hover {
  left: 0;
}
.swiper-button.swiper-button--next {
  right: 0;
}
.swiper-button.swiper-button--next .icon-hover {
  right: 0;
}
.swiper-button.swiper-button-disabled {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
}
.swiper-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .swiper-button:hover:not(.swiper-button-disabled) {
    color: var(--color-slider-arrow-icon-hover);
  }
  .swiper-button:hover .icon-hover {
    opacity: 1;
  }
  .swiper-button:hover.swiper-button--next .icon-base {
    transform: translateX(4px);
  }
  .swiper-button:hover.swiper-button--next .icon-hover {
    transform: translateY(-50%) translateX(-7px);
  }
  .swiper-button:hover.swiper-button--prev .icon-base {
    transform: translateX(-4px);
  }
  .swiper-button:hover.swiper-button--prev .icon-hover {
    transform: translateY(-50%) translateX(7px);
  }
}
body.rtl .swiper-button .icon-hover {
  transform: scale(-1) translateY(50%);
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  body.rtl .swiper-button:hover.swiper-button--next .icon-base {
    transform: scale(-1) translateX(4px);
  }
  body.rtl .swiper-button:hover.swiper-button--next .icon-hover {
    transform: scale(-1) translateY(50%) translateX(-7px);
  }
  body.rtl .swiper-button:hover.swiper-button--prev .icon-base {
    transform: scale(-1) translateX(-4px);
  }
  body.rtl .swiper-button:hover.swiper-button--prev .icon-hover {
    transform: scale(-1) translateY(50%) translateX(7px);
  }
}
.swiper-pagination-bullets .swiper-pagination-bullet {
  position: relative;
  width: 8px;
  height: 8px;
  opacity: 1;
  margin: 0 8px !important;
  border: none;
  border-radius: 16px;
  background-color: var(--color-border-secondary);
  transition-property: background-color, width;
  transition-duration: 0.3s;
}
.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 24px;
  background-color: var(--color-border-primary);
}
.swiper-pagination-bullets .swiper-pagination-bullet:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 2px;
}
.slider-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 24px;
}
.custom-swiper-pagination.swiper-pagination-progressbar.swiper-pagination-horizontal {
  position: relative;
  top: auto;
  bottom: 0;
  max-width: 214px;
  height: 2px;
  background-color: color-mix(in srgb, var(--color-slider-arrow-icon), transparent 80%);
}
.custom-swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--color-slider-arrow-icon);
}
/**
 * Component: Checkbox
 * -----------------------------------------------------------------------------
 * Base styling for custom checkboxes.
 * - Replaces the input using a styled label.
 *
 */
/* stylelint-disable */
.checkbox__input {
  /**
   * Active state.
   */
  /**
   * Disable state
   */
}
.checkbox__input:checked + .checkbox__label::before {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
}
.checkbox__input:checked + .checkbox__label::after {
  opacity: 1;
}
.checkbox__input:disabled + .checkbox__label {
  color: var(--color-text-thirdly);
  cursor: default;
}
.checkbox__input:disabled + .checkbox__label::before {
  border-color: var(--color-settings-preloader-primary);
  background-color: #f9f9f9;
}
.checkbox__input:disabled + .checkbox__label:hover {
  pointer-events: none;
}
.checkbox__input:focus-visible + .checkbox__label::before {
  outline: 2px solid var(--color-border-primary);
  outline-offset: 2px;
}
.checkbox__input.visually-hidden {
  overflow: visible;
}
.checkbox__label {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 1rem;
  margin: 0;
  padding-inline-start: 30px;
  color: var(--color-text-primary, #000000);
  cursor: pointer;
  word-break: break-word;
  /**
   * Box styling.
   */
  /**
   * Tick styling.
   */
  /**
   * State.
   */
}
.checkbox__label::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 24px;
  height: 24px;
  border: 1px solid var(--color-border-thirdly);
  border-radius: 4px;
  background-color: var(--color-background);
  box-sizing: border-box;
}
.checkbox__label:hover::before {
  border: 1px solid var(--color-border-thirdly);
}
.checkbox__label::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  opacity: 0;
  width: 24px;
  height: 24px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwIDZMOSAxN0w0IDEyIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 16px;
  box-sizing: border-box;
}
.checkbox__label.is-disabled {
  opacity: 0.7;
  cursor: default;
}
.checkbox__label.is-disabled:hover {
  cursor: default;
  pointer-events: none;
}
.checkbox.visually-hidden {
  overflow: visible;
}
.checkbox:checked + .checkbox-label .checkbox-label__box {
  border-color: var(--color-text-primary);
  background-color: var(--color-text-primary);
  color: var(--color-background);
}
.checkbox:checked + .checkbox-label .checkbox-label__box .icon-check {
  display: block;
}
.checkbox:checked:focus-visible + .checkbox-label .checkbox-label__box {
  outline-color: var(--color-background);
}
.checkbox:disabled + .checkbox-label {
  color: var(--color-text-thirdly);
  cursor: default;
}
.checkbox:disabled + .checkbox-label .checkbox-label__box {
  border-color: var(--color-border-secondary);
  background-color: var(--color-background-secondary);
}
.checkbox:focus-visible + .checkbox-label .checkbox-label__box {
  outline: 2px solid var(--color-text-primary);
  outline-offset: -2px;
}
.checkbox-label {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.checkbox-label .checkbox-label__box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-inline-end: 12px;
  border: 1px solid var(--color-text-primary-alpha);
  border-radius: 4px;
  background-color: var(--color-background-secondary);
  vertical-align: middle;
}
.checkbox-label .icon-check {
  display: none;
  width: 16px;
  height: 16px;
}
/* stylelint-enable */
/**
 * Base: Input
 * -----------------------------------------------------------------------------
 * Input resets, browser normalizing and base styling.
 *
 */
/* stylelint-disable */
.input-wrapper {
  position: relative;
}
.input-wrapper .input-label {
  position: absolute;
  top: 50%;
  inset-inline-start: 20px;
  overflow: hidden;
  opacity: 1;
  padding: 0 4px;
  color: var(--color-text-secondary, #757575);
  white-space: nowrap;
  cursor: default;
  max-width: calc(100% - 40px);
  transform: translateY(-50%);
  text-overflow: ellipsis;
  pointer-events: none;
  transition-property: top, font-size, padding;
  transition-duration: 0.3s;
}
.input-wrapper .input-label.input-label--required::after {
  content: "*";
  margin-inline-start: 4px;
}
.input-wrapper textarea:not(:focus) + .input-label {
  top: 16px;
  transform: translateY(0);
}
.input-wrapper textarea:not(:focus):not(:placeholder-shown) + .input-label {
  transform: translateY(-50%);
}
.input-wrapper .input::placeholder {
  opacity: 0;
}
.input-wrapper .input:focus + .input-label, .input-wrapper .input:not(:placeholder-shown) + .input-label {
  top: 0;
  background-color: var(--color-background);
  font-size: calc(var(--body-font-size) * 0.875);
  color: var(--color-text-primary);
}
.label-input {
  margin-bottom: 8px;
  font-size: calc(var(--body-font-size) * 0.875);
  color: var(--color-text-primary);
  line-height: 1.43;
  word-break: break-word;
}
.label-input.label-input--required::after {
  content: "*";
  margin-inline-start: 4px;
}
.label-input.label-input--disabled {
  color: var(--color-text-secondary);
}
.label-input.label-input--disabled::after {
  color: var(--color-text-secondary);
}
.input-error {
  margin-top: 2px;
  font-size: calc(var(--body-font-size) * 0.75);
  line-height: 1.17;
  color: var(--color-text-attention);
}
textarea {
  resize: none;
}
input[type=text],
input[type=number],
input[type=email],
input[type=password],
input[type=search],
input[type=tel],
input[type=date],
textarea {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 8px 24px;
  border: 1px solid var(--color-border-secondary);
  background-color: var(--color-background);
  border-radius: 8px;
  font-weight: 500;
  color: var(--color-text-primary);
  transition-property: box-shadow;
  transition-duration: var(--timing-base);
  -webkit-appearance: none;
}
input[type=text]::placeholder,
input[type=number]::placeholder,
input[type=email]::placeholder,
input[type=password]::placeholder,
input[type=search]::placeholder,
input[type=tel]::placeholder,
input[type=date]::placeholder,
textarea::placeholder {
  opacity: 1;
  font-weight: 400;
  line-height: 1.625;
  color: var(--color-text-secondary);
}
input[type=text][disabled],
input[type=number][disabled],
input[type=email][disabled],
input[type=password][disabled],
input[type=search][disabled],
input[type=tel][disabled],
input[type=date][disabled],
textarea[disabled] {
  background-color: var(--color-background-secondary);
  color: var(--color-text-secondary);
  cursor: default;
}
input[type=text]:focus-visible,
input[type=number]:focus-visible,
input[type=email]:focus-visible,
input[type=password]:focus-visible,
input[type=search]:focus-visible,
input[type=tel]:focus-visible,
input[type=date]:focus-visible,
textarea:focus-visible {
  border-color: var(--color-border-primary);
}
input[type=text].error,
input[type=number].error,
input[type=email].error,
input[type=password].error,
input[type=search].error,
input[type=tel].error,
input[type=date].error,
textarea.error {
  border-color: var(--color-text-attention);
}
input[type=date] {
  min-height: 56px;
  padding-top: 21px;
  padding-bottom: 16px;
  background-image: url("icon-calendar.svg");
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: top 50% right 15px;
  line-height: 0.8;
  text-align-last: left;
}
input[type=date]::-webkit-datetime-edit,
input[type=date]::-webkit-date-and-time-value {
  display: inline-block;
  padding: 0;
  line-height: 1;
}
input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-calendar-picker-indicator {
  opacity: 0;
  -webkit-appearance: none;
}
@supports (-moz-appearance: none) {
  input[type=date] {
    background-image: none;
  }
}
/* stylelint-enable */
.radio-container {
  position: relative;
  align-items: center;
  display: flex;
}
.select-wrapper {
  position: relative;
  color: var(--color-text-primary);
}
.select-wrapper .icon {
  position: absolute;
  top: 50%;
  inset-inline-end: 16px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
}
select {
  width: 100%;
  padding: 16px;
  padding-inline-end: 40px;
  background-color: var(--color-background);
  border-radius: 8px;
  border: 1px solid var(--color-border-secondary);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-primary);
  -webkit-appearance: none;
  appearance: none;
}
select[disabled] {
  color: var(--color-text-secondary);
  cursor: default;
}
select.error {
  border-color: var(--color-text-attention);
}
select:focus-visible {
  border-color: var(--color-border-primary);
}
@-moz-document url-prefix() {
  select {
    padding-top: 18px;
    padding-bottom: 18px;
  }
}
textarea,
.textarea {
  resize: none;
  width: 100%;
  min-height: 120px;
  margin: 0;
  padding: 16px 24px;
}
.pagination .pagination__list {
  display: flex;
}
.pagination .pagination__items-wrapper {
  display: flex;
  column-gap: 16px;
  position: relative;
}
.pagination .pagination__items-wrapper:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-border-secondary);
}
.pagination .pagination__item {
  position: relative;
  display: flex;
  justify-content: center;
}
.pagination .pagination__item .icon {
  width: 16px;
  height: 16px;
}
.pagination .pagination__item.no-events {
  pointer-events: none;
}
.pagination .pagination__item.pagination__item--prev {
  margin-inline-end: 10px;
}
.pagination .pagination__item.pagination__item--next {
  margin-inline-start: 10px;
}
.pagination .pagination__item.pagination__item--prev .pagination__link, .pagination .pagination__item.pagination__item--next .pagination__link {
  font-size: var(--body-font-size);
  color: var(--color-text-primary);
}
.pagination .pagination__item.pagination__item--prev .pagination__link.pagination__link--no-active, .pagination .pagination__item.pagination__item--next .pagination__link.pagination__link--no-active {
  color: var(--color-text-secondary);
}
.pagination .pagination__item.pagination__item--prev .pagination__link.pagination__link--no-active .icon path, .pagination .pagination__item.pagination__item--next .pagination__link.pagination__link--no-active .icon path {
  stroke: currentColor;
}
.pagination .pagination__item.pagination__item--no-active {
  color: var(--color-text-secondary);
  cursor: default;
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .pagination .pagination__item.pagination__item--no-active .pagination__link:hover {
    opacity: 1;
  }
}
.pagination .pagination__item .button-link__text-wrapper {
  display: none;
}
.pagination .pagination__link {
  position: relative;
  display: inline-flex;
  column-gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 12px;
  font-weight: 500;
  font-size: calc(var(--body-font-size) * 0.875);
  text-align: center;
  text-decoration: none;
  color: var(--color-text-secondary);
  transition-property: opacity;
  transition-duration: var(--timing-base);
  transition-timing-function: ease-in-out;
  line-height: 1.71;
}
.pagination .pagination__link.is-active {
  color: var(--color-text-primary, #000000);
}
.pagination .pagination__link.is-active:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  z-index: 1;
  background-color: var(--color-text-primary);
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .pagination .pagination__link:hover {
    opacity: 0.6;
  }
  .pagination .pagination__link:hover.is-active {
    opacity: 1;
  }
}
@media (min-width: 768px) {
  .pagination .pagination__item.pagination__item--prev {
    margin-inline-end: 32px;
  }
  .pagination .pagination__item.pagination__item--next {
    margin-inline-start: 32px;
  }
  .pagination .pagination__item .button-link__text-wrapper {
    display: block;
  }
}
.badge {
  position: relative;
  max-width: 120px;
  padding: 4px 12px;
  background: var(--color-background-label-base);
  backdrop-filter: blur(12px);
  font-size: var(--body-font-size);
  font-weight: 500;
  line-height: 1.17;
  text-align: center;
  font-style: normal;
  text-transform: capitalize;
  color: var(--color-label-base);
  word-break: break-word;
  transform: rotate(-10deg) skewX(-10deg);
}
.badge::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 10px;
  background: var(--color-background-label-base);
  transition: 0.5s all;
  clip-path: polygon(100% 70%, 94% 100%, 0% 70%);
}
.badge--sold-out {
  background: var(--color-background-label-sold-out);
  color: var(--color-label-sold-out);
}
.badge--sold-out::after {
  background: var(--color-background-label-sold-out);
}
.badge--primary {
  background: var(--color-background-label-primary);
  color: var(--color-label-primary);
}
.badge--primary::after {
  background: var(--color-background-label-primary);
}
.badge--secondary {
  background: var(--color-background-label-secondary);
  color: var(--color-label-secondary);
}
.badge--secondary::after {
  background: var(--color-background-label-secondary);
}
.badge--sale {
  background: var(--color-background-label-sale);
  color: var(--color-sale-label);
}
.badge--sale::after {
  background: var(--color-background-label-sale);
}
/**
 * Component: Radio - option
 * -----------------------------------------------------------------------------
 * Base styling for custom radio buttons who has option
 */
.radio-option-swatch-square .radio-option-swatch-square__label {
  display: block;
  width: 40px;
  height: 40px;
  background-color: var(--swatch-color, var(--color-product-card-swatch-bg));
  background-image: var(--swatch-image);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  border: 1px solid var(--color-product-card-swatch-border);
  border-radius: calc(var(--global-border-radius) * 0.5);
  transition-property: border-color;
  transition-duration: var(--timing-base);
}
.radio-option-swatch-square .radio-option-swatch-square__label.is-disabled {
  position: relative;
  text-decoration: line-through;
}
.radio-option-swatch-square .radio-option-swatch-square__label.is-disabled::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 70%;
  background-image: url(icon-swatch-cross.svg);
  background-repeat: no-repeat;
  background-size: contain;
  transform: translate(-50%, -50%);
}
.radio-option-swatch-square .radio-option-swatch-square__label.is-disabled::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  border-radius: calc(var(--global-border-radius) * 0.5);
  opacity: 0.2;
}
.radio-option-swatch-square:has(input:checked) .radio-option-swatch-square__label {
  background-color: var(--swatch-color, var(--color-text-primary));
  border: 1px solid var(--color-text-primary);
  outline: 1px solid var(--color-text-primary);
  outline-offset: 1px;
  cursor: default;
  pointer-events: none;
}
.radio-option-swatch-square:has(input:focus-visible) .radio-option-swatch-square__label {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 2px;
}
.radio-option-swatch-rectangle {
  position: relative;
  border-radius: calc(var(--global-border-radius) * 0.25);
}
.radio-option-swatch-rectangle::before {
  content: "";
  position: absolute;
  inset: 4px;
  background-color: var(--swatch-color, var(--color-text-primary-alpha));
  background-image: var(--swatch-image);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  border-radius: calc(var(--global-border-radius) * 0.25);
}
.radio-option-swatch-rectangle .radio-option-swatch-rectangle__label {
  position: relative;
  display: block;
  width: 32px;
  height: 20px;
  background-size: contain;
  border: 1px solid color-mix(in srgb, var(--color-text-primary), transparent 80%);
  border-radius: calc(var(--global-border-radius) * 0.25);
  transition-property: border-color;
  transition-duration: var(--timing-base);
}
.radio-option-swatch-rectangle .radio-option-swatch-rectangle__label::before, .radio-option-swatch-rectangle .radio-option-swatch-rectangle__label::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 16px;
  height: 1px;
  background-color: var(--color-text-primary);
  transform: translateX(-50%) scaleX(0);
  transition-property: transform;
  transition-duration: var(--timing-base);
}
.radio-option-swatch-rectangle .radio-option-swatch-rectangle__label::before {
  top: -1px;
}
.radio-option-swatch-rectangle .radio-option-swatch-rectangle__label::after {
  bottom: -1px;
}
.radio-option-swatch-rectangle .radio-option-swatch-rectangle__label.is-disabled {
  opacity: 0.8;
  background-image: url(icon-swatch-cross.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 50% 50%;
  text-decoration: line-through;
}
.radio-option-swatch-rectangle:has(input:checked) {
  background-color: color-mix(in srgb, var(--color-text-primary), transparent 80%);
}
.radio-option-swatch-rectangle:has(input:checked) .radio-option-swatch-rectangle__label {
  cursor: default;
  pointer-events: none;
}
.radio-option-swatch-rectangle:has(input:checked) .radio-option-swatch-rectangle__label::before, .radio-option-swatch-rectangle:has(input:checked) .radio-option-swatch-rectangle__label::after {
  transform: translateX(-50%);
}
.radio-option-swatch-rectangle:has(input:focus-visible) {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 2px;
}
.radio-option .radio-option__label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid color-mix(in srgb, var(--color-text-primary), transparent 80%);
  border-radius: calc(var(--global-border-radius) * 0.5);
  backdrop-filter: blur(24px);
  font-size: calc(var(--body-font-size) * 0.875);
  font-weight: 500;
  line-height: 1.714;
  text-align: center;
  color: var(--color-text-primary);
  cursor: pointer;
  word-break: break-word;
  transition: background-color var(--timing-short);
}
.radio-option .radio-option__label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 24px;
  height: 2px;
  background-color: var(--color-text-primary);
  transition: transform var(--timing-short);
}
.radio-option .radio-option__label::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 24px;
  height: 2px;
  background-color: var(--color-text-primary);
  transition: transform var(--timing-short);
}
.radio-option .radio-option__label.is-disabled {
  text-decoration: line-through;
  color: var(--color-text-thirdly);
  opacity: 0.8;
}
.radio-option .radio-input:checked + .radio-option__label {
  background-color: color-mix(in srgb, var(--color-text-primary), transparent 84%);
}
.radio-option .radio-input:checked + .radio-option__label::before, .radio-option .radio-input:checked + .radio-option__label::after {
  transform: translateX(-50%);
}
.radio-option .radio-input:focus-visible + .radio-option__label {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 0;
}
.radio-option .radio-input:disabled + .radio-option__label {
  background-color: var(--color-ghost-white);
}
.quantity {
  position: relative;
  display: flex;
  align-items: center;
  width: 110px;
  padding: 2px;
  background-color: var(--color-background-secondary);
  border: 1px solid color-mix(in srgb, var(--color-text-primary), transparent 70%);
  border-radius: calc(var(--global-border-radius) * 3);
  color: var(--color-text-primary, #000000);
}
.quantity .quantity__button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  padding: 1px;
  border: 1px solid transparent;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--color-text-primary), transparent 88%);
  color: var(--color-text-primary, #000000);
  cursor: pointer;
  flex-shrink: 0;
  transition-property: border-color;
  transition-duration: var(--timing-base);
}
.quantity .quantity__button.disabled, .quantity .quantity__button.is-disabled,
.quantity .quantity__button [disabled] {
  opacity: 0.5;
  cursor: auto;
  pointer-events: none;
}
.quantity .quantity__button .icon {
  width: 16px;
  height: 16px;
  transition-property: opacity;
  transition-duration: var(--timing-base);
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .quantity .quantity__button:hover:hover {
    border-color: var(--color-border-primary);
  }
  .quantity .quantity__button:hover:hover .icon {
    opacity: 0.7;
  }
}
.quantity .quantity__input {
  width: 100%;
  min-height: unset;
  margin: 0 5px;
  padding: 0;
  border: 0;
  background-color: transparent;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.375;
  text-align: center;
  color: currentColor;
  flex-grow: 1;
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  appearance: textfield;
}
.quantity .quantity__input::-webkit-outer-spin-button, .quantity .quantity__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.quantity .quantity__input:focus-visible {
  box-shadow: none;
  outline-offset: 0;
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .quantity .quantity__input:not(:focus-visible):hover {
    box-shadow: none;
  }
}
.product__quantity-rules {
  margin-top: 15px;
  font-size: calc(var(--body-font-size) * 0.875);
}
.product__quantity-rules-item:not(.is-hidden) + .product__quantity-rules-item::before {
  content: "•";
  margin: 0 3px;
}
.quantity-wrapper {
  flex-wrap: wrap;
}
.gift-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  line-height: 1.5;
  color: var(--color-text-primary);
  word-break: break-word;
}
.gift-button .gift-button__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  object-fit: contain;
  object-position: var(--img-desktop-pos);
}
.gift-button .gift-button__text {
  border-bottom: 1px solid currentColor;
  transition-property: border-color;
  transition-duration: var(--timing-short);
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .gift-button:hover .gift-button__text {
    border-color: transparent;
  }
}
.popup {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--layer-pop-out);
  display: flex;
  visibility: hidden;
  opacity: 0;
  width: 100%;
  height: 100%;
  padding: 12px;
  overflow-y: auto;
  transform: translateY(20px);
  transition-property: opacity, visibility, transform;
  transition-delay: 0s, 0s, var(--timing-base);
  transition-duration: var(--timing-base), var(--timing-base), 0s;
  transition-timing-function: var(--easing-slov-in-fast-out);
}
.popup.is-active {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
  transition-duration: var(--timing-long);
}
.popup .popup__container {
  position: relative;
  width: 100%;
  margin: auto;
  padding: 16px;
  background-color: var(--color-background-popup-drawer-alpha, #000);
  border-radius: var(--global-border-radius);
  backdrop-filter: blur(8px);
}
.popup .popup__tabs {
  overflow-x: auto;
  margin: 0 -4px;
  padding: 4px 0;
  text-align: center;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.popup .popup__tabs::-webkit-scrollbar {
  display: none;
}
.popup .popup__tabs-button {
  margin: 0 4px;
  padding: 11px 16px;
  background-color: transparent;
  border-color: color-mix(in srgb, var(--color-text-primary), transparent 88%);
  color: var(--color-text-primary);
}
.popup .popup__tabs-button::before {
  background-color: color-mix(in srgb, var(--color-text-primary), transparent 92%);
}
.popup .popup__tabs-button.active::before {
  transform: translate3d(0, 0%, 0);
}
.popup .rte > *:first-child {
  margin-top: 0;
}
.popup .rte > *:first-child img {
  margin-top: 0;
}
.popup .rte table {
  display: flex;
  overflow-x: auto;
  font-size: calc(var(--body-font-size) * 0.875);
}
.popup .rte table tbody {
  margin: 0 auto;
}
.popup .popup__tab-content {
  display: none;
  margin-top: 24px;
  animation-name: fadeIn;
  animation-duration: var(--timing-base);
}
.popup .popup__tab-content.active {
  display: block;
}
.popup .input {
  background-color: var(--color-background-popup-drawer-alpha, #000);
}
.popup .input-wrapper .input:focus + .input-label, .popup .input-wrapper .input:not(:placeholder-shown) + .input-label {
  background-color: var(--color-background-popup-drawer-alpha, #000);
  box-shadow: 0 0 7px 7px var(--color-background-popup-drawer-alpha);
}
.popup-close-icon-button {
  position: absolute;
  top: 24px;
  inset-inline-end: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--color-text-primary);
  transition-property: transform;
  transition-duration: var(--timing-base);
}
.popup-close-icon-button .icon {
  width: 100%;
  height: 100%;
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .popup-close-icon-button:hover {
    transform: rotate(90deg);
  }
}
.shopify-model-viewer-ui {
  background-color: white;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__controls-area {
  display: none;
  position: absolute;
  border-radius: 4px;
  right: 10px;
  bottom: 63px;
  border: 1px solid var(--ui-button-border-color);
  background-color: var(--ui-button-background-color, #fff);
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__button {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--ui-button-color, #000);
  transition-property: background-color, color;
  transition-duration: var(--timing-short);
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__button:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__button:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__button:not(:last-child)::after {
  content: "";
  position: absolute;
  opacity: 0.05;
  background-color: var(--ui-button-color, #000);
  width: 28px;
  height: 1px;
  bottom: 0;
  right: 8px;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__button svg {
  width: 100%;
  height: 100%;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__button:focus-visible {
  outline: 2px solid var(--ui-button-color, #000);
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .shopify-model-viewer-ui .shopify-model-viewer-ui__button:hover {
    background-color: var(--ui-button-color, #000);
    color: var(--ui-button-background-color, #fff);
  }
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster {
  border-radius: 50%;
  color: var(--ui-button-color, #000);
  background-color: var(--ui-button-background-color, #fff);
  border-color: var(--ui-button-color, #000);
  transform: translate(-50%, -50%) scale(1);
  transition: transform var(--duration-short) ease, color var(--duration-short) ease;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__poster-control-icon {
  width: 4.8rem;
  height: 4.8rem;
  margin-top: 0.3rem;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__control-icon--enter-fullscreen {
  display: block;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__control-icon--exit-fullscreen {
  display: none;
}
.shopify-model-viewer-ui.shopify-model-viewer-ui--fullscreen .shopify-model-viewer-ui__control-icon--enter-fullscreen {
  display: none;
}
.shopify-model-viewer-ui.shopify-model-viewer-ui--fullscreen .shopify-model-viewer-ui__control-icon--exit-fullscreen {
  display: block;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
@media (min-width: 1200px) {
  .shopify-model-viewer-ui .shopify-model-viewer-ui__controls-area {
    display: flex;
    bottom: 10px;
  }
}
.section-title {
  display: flex;
  flex-direction: column;
}
.section-title.section-title--center {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.section-title em {
  font-weight: 300;
}
.section-title a {
  transition-property: text-decoration-color;
  transition-duration: var(--timing-base);
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .section-title a:hover {
    text-decoration-color: transparent;
  }
}
.section-title .section-title__text-container {
  display: block;
  width: 100%;
  overflow-y: clip;
}
.section-title .section-title__text-container:nth-child(2) {
  font-family: var(--heading-font-second-family);
  font-weight: var(--heading-font-second-weight);
}
.section-title .section-title__text {
  display: block;
  width: 100%;
}
.section-title.need-animate .section-title__text {
  opacity: 0;
  transform: translateY(100%);
}
html.no-js .section-title.need-animate .section-title__text {
  opacity: 1;
  transform: translateY(0);
}
.animated .section-title.need-animate .section-title__text {
  opacity: 1;
  transform: translateY(0);
  transition-property: opacity, transform;
  transition-duration: var(--animate-time);
  transition-delay: var(--delay-step, 0);
}
.animated .section-title.need-animate .section-title__text-container + .section-title__text-container .section-title__text {
  transition-delay: var(--delay-step, 0.25s);
}
.custom-dropdown {
  position: relative;
  min-width: 286px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.custom-dropdown .custom-dropdown__label {
  font-size: calc(var(--body-font-size) * 0.875);
  line-height: 1.4286;
  color: var(--color-text-primary);
  word-break: break-word;
}
.custom-dropdown .custom-dropdown__trigger {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 16px;
  color: var(--color-text-primary);
  background-color: var(--color-custom-select-trigger-background);
  border: 1px solid color-mix(in srgb, var(--color-text-primary), transparent 86%);
  border-radius: calc(var(--global-border-radius) * 0.5);
  text-align: start;
  font-size: var(--body-font-size);
  line-height: 1.5;
  transition-property: border-color;
  transition-duration: var(--timing-base);
}
.custom-dropdown .custom-dropdown__trigger:focus-visible {
  border: 1px solid var(--color-border-primary);
}
.custom-dropdown .custom-dropdown__trigger-content {
  display: none;
}
.custom-dropdown .custom-dropdown__trigger-content.custom-dropdown__trigger-content--color-swatch {
  position: relative;
  padding-inline-start: 56px;
  word-break: break-word;
}
.custom-dropdown .custom-dropdown__trigger-content.custom-dropdown__trigger-content--color-swatch::before {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 0;
  width: 40px;
  height: 40px;
  background-color: var(--swatch-color);
  background-image: var(--swatch-image);
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: calc(var(--global-border-radius) * 0.5);
  outline: 1px solid color-mix(in srgb, var(--color-text-primary), transparent 86%);
  transform: translateY(-50%);
}
.custom-dropdown .custom-dropdown__trigger-icon {
  min-width: 16px;
  transition-property: transform;
  transition-duration: var(--timing-base);
  transform: rotate(0);
}
.custom-dropdown .custom-dropdown__options {
  max-height: 220px;
  overflow-y: auto;
  position: absolute;
  z-index: 2;
  top: calc(100% + 4px);
  width: 100%;
  background-color: var(--color-text-primary);
  color: var(--color-background);
  border-radius: calc(var(--global-border-radius) / 2);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 4px;
}
.custom-dropdown .custom-dropdown__options:has(.custom-dropdown__option--color-swatch) {
  max-height: 248px;
}
.custom-dropdown .custom-dropdown__option {
  position: relative;
  padding: 12px;
  border-radius: calc(var(--global-border-radius) / 2);
  background-color: transparent;
  font-weight: 500;
  font-size: var(--body-font-size);
  line-height: 1.5;
  cursor: pointer;
}
.custom-dropdown .custom-dropdown__option.custom-dropdown__option--color-swatch {
  display: flex;
  min-height: 56px;
  padding-inline-start: 64px;
  align-items: center;
  word-break: break-word;
}
.custom-dropdown .custom-dropdown__option.custom-dropdown__option--color-swatch::before {
  content: "";
  position: absolute;
  inset-inline-start: 8px;
  width: 40px;
  height: 40px;
  outline: 1px solid var(--color-border-thirdly);
  background-color: var(--swatch-color);
  background-image: var(--swatch-image);
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: calc(var(--global-border-radius) * 0.5);
}
.custom-dropdown .custom-dropdown__option.is-disabled {
  text-decoration: line-through;
}
.custom-dropdown .custom-dropdown__option::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  border-radius: calc(var(--global-border-radius) / 2);
  background-color: var(--color-background);
  transition-property: opacity;
  transition-duration: var(--timing-base);
}
.custom-dropdown .custom-dropdown__option:has(input:checked)::after {
  opacity: 0.08;
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .custom-dropdown .custom-dropdown__option:hover::after {
    opacity: 0.08;
  }
}
.custom-dropdown.is-active .custom-dropdown__trigger {
  border: 1px solid var(--color-border-primary);
}
.custom-dropdown.is-active .custom-dropdown__options {
  display: flex;
}
.custom-dropdown.is-active .custom-dropdown__trigger-icon {
  transform: rotate(180deg);
}
/**
 * Component: Accordion
 * -----------------------------------------------------------------------------
 * Base styling for accordion dropdown menus.
 * - Recommended to use on `<ul>` and `<li>` elements.
 *
 */
.accordion {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.accordion__title {
  margin-bottom: 0;
}
.accordion__content {
  display: none;
}
.accordion__content--animate {
  overflow: hidden;
  display: block;
  transition: 0.5s ease height;
}
.accordion__content p:empty {
  display: none;
}
.accordion__control {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  text-decoration: none;
  word-break: break-word;
}
.accordion__control .icon {
  flex-shrink: 0;
  transition: transform 0.25s;
}
.accordion__item.is-active .accordion__content {
  display: block;
}
/**
 * Component: Window overlay
 * -----------------------------------------------------------------------------
 * A clickable window overlay that appears behind focused elements.
 *
 */
.window-overlay {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--layer-overlay);
  display: block;
  opacity: 0;
  height: 100vh;
  backdrop-filter: blur(13px);
  transition: opacity var(--timing-base) var(--easing-ease-in-out);
  pointer-events: auto;
  backdrop-filter: blur(12px);
}
.window-overlay.is-active {
  opacity: 1;
}
.drawer {
  position: fixed;
  top: auto;
  bottom: 0;
  inset-inline-end: 0;
  z-index: var(--layer-pop-out);
  display: flex;
  visibility: hidden;
  opacity: 0;
  width: 100%;
  height: calc(100% - 32px);
  max-width: 100%;
  margin: 0;
  background-color: var(--color-background-popup-drawer-alpha, #000);
  border-radius: var(--global-border-radius) var(--global-border-radius) 0 0;
  backdrop-filter: blur(8px);
  transform: translateY(100%);
  transition-property: transform, max-width, visibility, opacity;
  transition-delay: 0s, 0s, calc(var(--timing-long) * 0.3), calc(var(--timing-long) * 0.3);
  transition-duration: 0.9s, 0.9s, 0.81s, 0.81s;
  transition-timing-function: var(--easing-slov-in-fast-out);
  flex-direction: column;
  will-change: transform, opacity;
}
.drawer .input,
.drawer .textarea,
.drawer select {
  background-color: var(--color-background-popup-drawer-alpha, #000);
}
.drawer .input-wrapper .input:focus + .input-label, .drawer .input-wrapper .input:not(:placeholder-shown) + .input-label {
  background-color: var(--color-background-popup-drawer-alpha, #000);
  box-shadow: 0 0 7px 7px var(--color-background-popup-drawer-alpha);
}
.drawer.drawer--bottom {
  top: unset;
  bottom: 0;
  transform: translateY(100%);
}
.drawer.is-active {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0) !important;
  transition-delay: 0s;
}
.drawer.is-full {
  max-width: 100%;
}
.drawer.drawer--auto-height {
  top: unset;
  bottom: 0;
  height: auto;
  max-height: calc(100% - 32px);
}
@media (min-width: 576px) {
  .drawer {
    top: 0;
    bottom: auto;
    max-width: 480px;
    height: calc(100% - 32px);
    margin: 16px 0;
    border-radius: var(--global-border-radius) 0 0 var(--global-border-radius);
    transform: translateX(100%);
  }
  .drawer.drawer--left {
    left: 0;
    right: unset;
    transform: translateX(-100%);
    border-radius: 0 var(--global-border-radius) var(--global-border-radius) 0;
  }
}
@media (min-width: 992px) {
  .drawer {
    max-width: 480px;
  }
}
.drawer__header {
  display: flex;
  gap: 24px;
  width: 100%;
  padding: 24px;
}
.drawer__title {
  font-size: calc(var(--heading-font-size) * 1.375);
  font-weight: bold;
  line-height: 1.18;
  word-break: break-word;
}
.drawer__body {
  overflow: auto;
  flex: 1;
  padding: 0 24px 24px;
}
.drawer__body.rte > span {
  margin-top: 30px;
  margin-bottom: 30px;
}
.drawer__body.rte table {
  overflow: auto;
  display: block;
  width: 100%;
}
.drawer__body.rte table::-webkit-scrollbar {
  height: 7px;
}
.drawer__body.rte table::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.1);
}
.drawer__body.rte table::-webkit-scrollbar-thumb {
  background-color: rgba(48, 93, 112, 0.3);
}
.drawer__body.rte tbody {
  display: inline-table;
  width: 100%;
}
@media (min-width: 768px) {
  .drawer__body {
    padding: 0 24px 40px;
  }
}
.drawer__close {
  display: flex;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  margin-inline-start: auto;
  color: var(--color-text-primary);
  transition-property: transform;
  transition-duration: var(--timing-base);
}
.drawer__close svg {
  width: 100%;
  height: 100%;
}
.drawer__close:focus-visible {
  outline: 2px solid var(--color-text-primary);
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .drawer__close:hover {
    transform: rotate(90deg);
  }
}
.drawer__tabs {
  overflow-x: auto;
  margin: 0 -20px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border-secondary);
  text-align: center;
  white-space: nowrap;
}
.drawer__tabs::-webkit-scrollbar {
  display: none;
}
@media (min-width: 768px) {
  .drawer__tabs {
    margin: 0 -40px;
    padding: 14px 0;
  }
}
.drawer__tabs-button {
  margin: 0 25px;
  padding: 10px 0;
  border: none;
  font-size: calc(var(--body-font-size) * 0.94);
  font-weight: bold;
  color: var(--color-text-primary);
}
.drawer__tabs-button .drawer__tabs-button-text {
  border-bottom: 1px solid transparent;
  transition-property: border-bottom-color;
  transition-duration: 0.3s;
}
.drawer__tabs-button.active .drawer__tabs-button-text {
  border-bottom: 1px solid currentColor;
}
.drawer__tabs-button:focus-visible {
  outline: 2px solid var(--color-text-primary);
}
.drawer__tab-content {
  display: none;
  padding-top: 25px;
}
.drawer__tab-content.active {
  display: block;
}
body.rtl .drawer {
  transform: translateX(-100%);
  border-radius: 0 var(--global-border-radius) var(--global-border-radius) 0;
}
/**
 * Component: Modal
 * -----------------------------------------------------------------------------
 * Styling for a component dialogs to your site for user notifications or
 * custom content defined in section settings.
 *
 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--layer-pop-out);
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  width: 100%;
  height: auto;
  max-height: 100%;
  transition-property: opacity, visibility, transform;
  transition-duration: var(--timing-base);
  transition-timing-function: var(--easing-slov-in-fast-out);
  pointer-events: none;
  /**
   * States.
   */
}
.modal.modal__card--full {
  transform: translate(-50%, -50%);
}
.modal.is-active, .modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.modal.is-active.modal__card, .modal.is-open.modal__card {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.modal__header {
  width: 100%;
  margin-bottom: 0;
  text-align: center;
}
.modal__body {
  max-width: 100%;
  padding: 1rem 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.modal__body.modal__body--gutter-auto {
  scrollbar-gutter: auto;
}
.modal__card {
  top: 50%;
  left: 50%;
  opacity: 0;
  height: auto;
  margin: 0 auto;
  padding: 25px 25px 50px 25px;
  padding-inline-start: 35px;
  border: 1px solid var(--color-border-thirdly);
  background-color: var(--color-background-popup-drawer);
  transform: translateY(-20%);
  flex-direction: column;
  max-width: 950px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.modal__card.modal__card--full {
  max-width: 100vw;
  width: 100%;
  max-height: 100vh;
  height: 100%;
  padding: 0;
  border: 0;
}
.modal__card.modal__card--full .modal__body {
  width: 100%;
  height: 100%;
  padding: 0;
}
.modal__footer {
  width: 100%;
  padding: 1rem 0;
  border-top: 1px solid var(--color-border-thirdly);
}
.modal__close {
  position: absolute;
  z-index: var(--layer-flat, 1);
  top: 16px;
  inset-inline-end: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ui-button-border-color);
  border-radius: 4px;
  color: var(--ui-button-color, #000);
  transition-property: background-color, color, border-color;
  transition-duration: var(--timing-base);
}
.modal__close.modal__close--bg {
  background-color: var(--ui-button-background-color, #fff);
}
.modal__close .icon {
  width: 24px;
  height: 24px;
  pointer-events: none;
}
.modal__close:focus-visible {
  box-shadow: inset 0 0 0 2px #000;
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .modal__close:hover {
    border-color: var(--ui-button-color, #000);
    background-color: var(--ui-button-color, #000);
    color: var(--ui-button-background-color, #fff);
  }
}
@media (max-width: 991.98px) {
  .modal__header {
    position: relative;
    padding: 1rem;
  }
}
.payment-types {
  display: inline-flex;
}
.payment-types .payment-types__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.payment-types .payment-types__item {
  line-height: 0;
}
.payment-types .payment-types__item .icon {
  width: auto;
  height: 28px;
}
.discounts {
  display: flex;
  flex-direction: column;
  row-gap: 5px;
}
.discounts.discounts--right {
  align-items: flex-end;
}
.discounts .discounts__item {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  word-break: break-word;
}
.discounts .discounts__item .icon {
  width: 16px;
  height: 16px;
  margin-inline-end: 5px;
}
.discounts .discounts__item + .discounts__item {
  margin-top: 5px;
}
.price {
  color: var(--price-color, var(--color-text-primary));
  word-break: break-word;
}
.price .price-item {
  margin-inline-end: 8px;
}
.price .price-item.price-item--sale {
  font-weight: 500;
  color: var(--sale-price-color, var(--product-sale-price-color));
}
.price .price-item.price-item--regular {
  margin-inline-end: 0;
}
.price .price__regular {
  display: block;
}
.price .price__sale, .price.price--on-sale .price__regular {
  display: none;
}
.price.price--on-sale .price__sale {
  display: initial;
  flex-direction: row;
  flex-wrap: wrap;
}
.price.price--on-sale .price__sale .price-item--regular {
  text-decoration: line-through;
  color: var(--regular-price-color, var(--color-text-secondary));
}
.price .price__volume-pricing-note {
  margin-top: 7px;
  font-size: calc(var(--body-font-size) * 0.875);
  font-weight: normal;
}
.price .unit-price {
  display: block;
  margin-top: 5px;
  font-size: 0.85em;
  line-height: 1.15;
}
.popover-container {
  position: relative;
}
.popover {
  position: absolute;
  top: 100%;
  z-index: 2;
  visibility: hidden;
  opacity: 0;
  width: 100%;
  border: 1px solid var(--color-border-secondary);
  background-color: var(--color-background);
  color: var(--color-text-primary);
  transition: opacity var(--timing-base) ease;
}
.popover.is-active {
  visibility: visible;
  opacity: 1;
}
.popover__button {
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: 1;
  color: var(--color-text-primary, #000000);
  transition: opacity 0.3s ease;
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .popover__button:hover {
    opacity: 0.5;
  }
}
.popover__content {
  padding: 20px;
  padding-inline-end: 30px;
}
.rte {
  line-height: 1.5;
  word-break: break-word;
  color: var(--color-text-primary);
}
.rte * + h1,
.rte * + h2,
.rte * + h3,
.rte * + h4 {
  margin-top: 32px;
}
.rte * + h5,
.rte * + h6 {
  margin-top: 24px;
}
.rte h1,
.rte h2,
.rte h3,
.rte h4 {
  margin-bottom: 24px;
}
.rte h5,
.rte h6 {
  margin-bottom: 20px;
}
.rte p + p {
  margin-top: 24px;
}
.rte p + ul,
.rte p + ol {
  margin-top: 24px;
}
.rte h2, .rte .h2 {
  font-size: calc(var(--heading-font-size) * 1.75);
}
.rte h3, .rte .h3 {
  font-size: calc(var(--heading-font-size) * 1.375);
  line-height: 1.27;
}
.rte h4, .rte .h4 {
  font-size: calc(var(--heading-font-size) * 1.125);
  line-height: 1.22;
}
.rte img {
  margin: 32px 0;
  border-radius: 8px;
}
.rte a {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--link-color);
  transition-duration: var(--timing-short);
  transition-property: text-decoration-color;
}
.rte a:focus-visible {
  outline: 2px solid var(--color-text-primary);
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .rte a:hover {
    text-decoration-color: transparent;
  }
}
.rte blockquote {
  margin-bottom: 25px;
  padding-inline-start: 25px;
  font-size: calc(var(--body-font-size) * 1.1);
  font-weight: 600;
  border-inline-start: 2px solid var(--color-text-primary);
}
@media (min-width: 1200px) {
  .rte blockquote {
    font-size: calc(var(--body-font-size) * 1.1);
  }
}
.rte iframe,
.rte video {
  max-width: 100%;
  border-radius: 8px;
}
.rte ol,
.rte ul {
  margin-bottom: 24px;
  padding-inline-start: 0;
  list-style-position: inside;
}
.rte ol + ul,
.rte ol + ol,
.rte ul + ul,
.rte ul + ol {
  margin-top: 24px;
}
.rte ol > li,
.rte ul > li {
  padding-inline-start: 0;
}
.rte ol li + li,
.rte ul li + li {
  margin-top: 16px;
}
.rte ol li > ul,
.rte ol li ol,
.rte ul li > ul,
.rte ul li ol {
  padding-top: 10px;
}
.rte ol {
  list-style-type: decimal;
}
.rte ul {
  list-style-type: disc;
}
.rte > *:last-child {
  margin-bottom: 0;
}
.rte > img {
  display: flex;
  width: 100%;
  max-width: 100%;
  margin: 32px auto;
}
.rte > img + img {
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .rte > img {
    width: auto;
  }
}
.rte .rte__table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rte:not(.rte-size-guide) table {
  margin: 35px auto;
  border-collapse: initial;
  border-spacing: 0;
  word-break: normal;
}
.rte:not(.rte-size-guide) table tr td:first-child, .rte:not(.rte-size-guide) table tr th:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.rte:not(.rte-size-guide) table tr td:last-child, .rte:not(.rte-size-guide) table tr th:last-child {
  border-bottom-right-radius: 8px;
  border-top-right-radius: 8px;
}
.rte:not(.rte-size-guide) table tr:nth-child(odd) td, .rte:not(.rte-size-guide) table tr:nth-child(odd) th {
  background-color: var(--color-background-secondary);
}
.rte:not(.rte-size-guide) table td, .rte:not(.rte-size-guide) table th {
  padding: 16px 24px;
}
@media (max-width: 575.98px) {
  .rte:not(.rte-size-guide) table {
    overflow: auto;
    display: block;
  }
}
.rte.rte-size-guide table {
  margin: 25px auto;
  margin-bottom: 0;
  border-collapse: initial;
  border-spacing: 0;
  word-break: normal;
}
.rte.rte-size-guide table td {
  padding: 10px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text-primary), transparent 88%);
  text-align: center;
}
.rte.rte-size-guide table th {
  padding: 10px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text-primary), transparent 88%);
  font-weight: bold;
}
@media (max-width: 575.98px) {
  .rte.rte-size-guide table {
    overflow: auto;
    display: block;
  }
}
.rte.rte-product-drawer {
  padding-top: 24px;
  padding-bottom: 24px;
}
.rte.rte-product-drawer > *:first-child {
  margin-top: 0;
}
.rte.rte-product-drawer > *:first-child img {
  margin-top: 0;
}
@media (min-width: 768px) {
  .rte h1, .rte .h1 {
    font-size: calc(var(--heading-font-size) * 2.3125);
  }
  .rte h2, .rte .h2 {
    font-size: calc(var(--heading-font-size) * 1.9375);
  }
}
@media (min-width: 1200px) {
  .rte h1, .rte .h1 {
    font-size: calc(var(--heading-font-size) * 3.25);
  }
  .rte h2, .rte .h2 {
    font-size: calc(var(--heading-font-size) * 2.625);
  }
  .rte h3, .rte .h3 {
    font-size: calc(var(--heading-font-size) * 2);
    line-height: 1.25;
  }
  .rte h4, .rte .h4 {
    font-size: calc(var(--heading-font-size) * 1.375);
    line-height: 1.18;
  }
}
.compare-products-popup-button {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 12;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: visible;
  opacity: 1;
  width: 48px;
  height: 48px;
  padding: 0;
  background-color: var(--color-compare-sticky-button-bg, #000);
  color: var(--color-compare-sticky-button-color, #fff);
  border-radius: 4px;
  transition-property: opacity, background-color, color, visibility, transform;
  transition-duration: var(--timing-short);
  transition-timing-function: var(--easing-ease-out);
}
.compare-products-popup-button:focus-visible {
  outline: 2px solid black;
  outline-offset: 2px;
}
.compare-products-popup-button[data-count=""], .compare-products-popup-button[data-count="0"], .compare-products-popup-button[data-count="1"] {
  visibility: hidden;
  transform: translateY(110px);
}
.compare-products-popup-button.big-padding {
  bottom: 70px;
}
.compare-products-popup-button.big-padding[data-count=""], .compare-products-popup-button.big-padding[data-count="0"], .compare-products-popup-button.big-padding[data-count="1"] {
  transform: translateY(112px);
}
.compare-products-popup-button svg {
  width: 16px;
  height: 16px;
}
.compare-products-popup-button::before {
  content: attr(data-count);
  position: absolute;
  top: -5px;
  right: -5px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--color-text-attention);
  font-weight: 500;
  font-size: calc(var(--body-font-size) * 0.625);
}
.compare-products-popup-button .compare-products-popup-button__outer {
  position: absolute;
  z-index: -1;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border-radius: 8px;
  border: 1px solid var(--color-compare-sticky-button-bg);
}
.compare-products-popup-button .compare-products-popup-button__outer::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  display: inline-block;
  width: 18px;
  height: 18px;
  border-bottom: 2px solid var(--color-compare-sticky-button-color);
  border-right: 2px solid var(--color-compare-sticky-button-color);
  border-bottom-right-radius: 8px;
  transition-duration: 0.4s, 0.4s, 0.4s, 0s;
  transition-property: transform, right, border-right-color, border-bottom-right-radius;
  transition-delay: 0s, 0s, 0.3s, 0.3s;
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .compare-products-popup-button:hover {
    opacity: 0.5;
  }
  .compare-products-popup-button:hover .compare-products-popup-button__outer::after {
    right: 50%;
    border-bottom-color: var(--color-compare-sticky-button-color);
    border-right-color: transparent;
    border-bottom-right-radius: 0;
    transform: translateX(50%);
    transition-duration: 0.4s, 0.4s, 0s, 0.4s;
    transition-delay: 0s, 0s, 0s, 0s;
  }
}
@media (min-width: 768px) {
  .compare-products-popup-button {
    width: 44px;
    height: 44px;
  }
  .compare-products-popup-button::before {
    width: 18px;
    height: 18px;
    font-size: calc(var(--body-font-size) * 0.75);
  }
  .compare-products-popup-button.big-padding {
    bottom: 80px;
  }
  .compare-products-popup-button.big-padding[data-count=""], .compare-products-popup-button.big-padding[data-count="0"], .compare-products-popup-button.big-padding[data-count="1"] {
    transform: translateY(146px);
  }
  .compare-products-popup-button svg {
    width: 24px;
    height: 24px;
  }
}
@media (min-width: 992px) {
  .compare-products-popup-button {
    margin: 8px;
  }
  .compare-products-popup-button .compare-products-popup-button__outer {
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
  }
}
.header {
  position: relative;
}
.header::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, var(--header-background-1) 0%, transparent 100%);
}
.header .header__container {
  display: flex;
  position: relative;
  z-index: 1;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 0 auto;
  padding: 8px;
}
.header .header__logo {
  display: flex;
  flex: 0 1 auto;
  justify-content: center;
}
.header .header__heading,
.header .header__heading-link {
  display: inline-flex;
}
.header .header__heading-logo-picture {
  display: flex;
}
.header .header__heading-link {
  text-align: center;
  text-decoration: none;
  word-break: break-word;
}
.header .header__heading-link:focus-visible {
  outline: 2px solid var(--color-text-primary);
}
.header .header__heading-logo {
  object-fit: contain;
  object-position: var(--img-desktop-pos);
}
.header .header__menu {
  display: none;
  flex: 1 1 0;
}
.header .header__burger-menu-button-wrapper {
  display: flex;
  flex: 1 1 0;
}
.header .header__utils {
  display: flex;
  flex: 1 1 0;
  justify-content: flex-end;
  align-items: center;
  gap: 40px;
}
.header .header__localization {
  display: none;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 8px;
  white-space: nowrap;
}
.header .header__icons {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header .header__cart-count[data-cart-count="0"] {
  display: none;
}
.header .header__icon.header__icon--search {
  display: none;
}
.header .header__icon.header__icon--account {
  display: none;
}
@media (min-width: 1200px) {
  .header::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(12px);
    transition-duration: var(--timing-base);
    transition-property: height, visibility, opacity;
    background-color: var(--header-active-background);
    transition-timing-function: ease, ease, cubic-bezier(0.6, 0.14, 0, 1);
  }
  .header.force-transition::before {
    transition-duration: 0s;
  }
  .header.is-hover::before {
    visibility: visible;
    opacity: 1;
    height: calc(100% + var(--menu-height, 0px));
  }
  .header .header__container {
    gap: 48px;
    padding: 6px 48px;
  }
  .header .header__burger-menu-button-wrapper {
    display: none;
  }
  .header .header__menu {
    display: flex;
  }
  .header .header__localization {
    display: flex;
  }
  .header .header__icon.header__icon--search {
    display: block;
  }
  .header .header__icon.header__icon--account {
    display: block;
  }
}
.header .product-card .product-card__title {
  color: var(--product-card-title-color, var(--color-text-primary));
}
.header .product-card .product-card__vendor {
  color: var(--product-card-vendor-color, var(--color-text-secondary));
}
.header-section {
  position: sticky;
  top: 0;
  z-index: 13;
  width: 100%;
  transition-property: transform, opacity, z-index;
  transition-duration: var(--timing-short);
  transition-delay: 0s, 0s, var(--timing-short);
  transition-timing-function: var(--easing-linear);
  overflow-x: clip;
}
.header-section.is-collapsed {
  z-index: 12;
  transition-delay: 0s;
  transform: translateY(-100%);
}
:has(.shopify-section:first-of-type .allow-transparent-header) .header-section {
  margin-bottom: calc(var(--header-height-static) * -1);
}
.header-overlay {
  content: "";
  position: fixed;
  top: var(--header-offset-top);
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  display: block;
  visibility: hidden;
  opacity: 0;
  height: 100vh;
  transition-property: opacity, visibility;
  transition-duration: var(--timing-base);
  transition-timing-function: var(--easing-ease-in-out);
  pointer-events: auto;
  backdrop-filter: blur(12px);
}
.header-overlay.is-active {
  visibility: visible;
  opacity: 1;
}
.header-menu-main .header-menu-main__container {
  display: flex;
  position: relative;
  padding: 8px;
  border-radius: calc(var(--global-border-radius) / 2);
  overflow: hidden;
}
.header-menu-main .header-menu-main__list {
  display: flex;
  flex-wrap: wrap;
  border-radius: calc(var(--global-border-radius) / 4);
  background-color: var(--header-main-menu-background);
  backdrop-filter: blur(24px);
}
.header-menu-main .header-menu-main__item {
  display: block;
  padding: 4px;
  font-size: calc(var(--body-font-size) * 0.875);
  font-weight: 500;
  line-height: 1.71;
  text-decoration: none;
  word-break: break-word;
  transition-property: filter;
  transition-duration: var(--timing-base);
}
.header-menu-main .header-menu-main__item.is-disabled {
  pointer-events: none;
  filter: blur(2px);
}
.header-menu-main .header-menu-main__item.is-active .header-menu-main__item-inner {
  color: var(--header-main-menu-text-color-active);
  background-color: var(--header-main-menu-text-background-active);
}
.header-menu-main .header-menu-main__item.is-active .header-menu-main__item-icon {
  transform: rotate(45deg);
}
.header-menu-main .header-menu-main__item.is-active .header-menu-main__item-toggle-icon {
  transform: rotate(180deg);
}
.header-menu-main .header-menu-main__item:focus-visible .header-menu-main__item-inner {
  outline: 2px solid var(--header-main-menu-text-color);
  outline-offset: 1px;
}
.header-menu-main .header-menu-main__item-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: calc(var(--global-border-radius) / 4);
  color: var(--header-main-menu-text-color);
  transition-property: color, background-color;
  transition-duration: var(--timing-base);
}
.header-menu-main .header-menu-main__item-inner .icon {
  width: 16px;
  height: 16px;
}
.header-menu-main .header-menu-main__item-icon {
  display: flex;
  flex-shrink: 0;
  transition-property: transform;
  transition-duration: var(--timing-base);
}
.header-menu-main .header-menu-main__item-toggle-icon {
  display: flex;
  flex-shrink: 0;
  transition-property: transform;
  transition-duration: var(--timing-base);
}
.header-menu-main .header-menu-main__item-toggle-icon .icon {
  width: 12px;
  height: 12px;
}
.header-navigation-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 0;
  text-decoration: none;
  color: var(--header-navigation-item-text-color);
  transition-property: opacity;
  transition-duration: var(--timing-base);
  word-break: break-word;
}
.header-navigation-item .header-navigation-item__text {
  font-family: var(--heading-font-family);
  font-size: calc(var(--heading-font-size) * 1.35);
  font-weight: 600;
  text-align: start;
  line-height: 1.43;
  word-break: break-word;
  transition-property: background-size;
  transition-duration: var(--timing-base);
  background-image: linear-gradient(to right, currentColor, currentColor);
  background-position: 0 min(1.43em - 2px, 100%);
  background-size: 0 2px;
  background-repeat: no-repeat;
}
.header-navigation-item .icon {
  width: 24px;
  height: 24px;
}
.header-navigation-item .header-navigation-item__toggle-icon {
  margin-inline-start: auto;
  display: inline-flex;
  flex-shrink: 0;
  transition-property: transform;
  transition-duration: var(--timing-base);
}
.header-navigation-item:focus-visible {
  outline: 2px solid currentColor;
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .header-navigation-item:not(.header-navigation-item--no-hover):hover .header-navigation-item__toggle-icon {
    transform: translateX(5px);
  }
  .header-navigation-item:not(.header-navigation-item--no-hover):hover .header-navigation-item__text {
    background-size: 24px 2px;
  }
}
.header-navigation-item.header-navigation-item--medium .header-navigation-item__text {
  font-size: calc(var(--heading-font-size) * 1.375);
  line-height: 1.45;
  background-position: 0 min(1.45em - 2px, 100%);
}
.header-navigation-item.header-navigation-item--medium-small .header-navigation-item__text {
  font-size: calc(var(--heading-font-size) * 1.125);
  font-weight: 400;
}
.header-navigation-item.header-navigation-item--small .header-navigation-item__text {
  font-size: var(--heading-font-size);
  font-weight: 400;
  line-height: 1.5;
  background-position: 0 min(1.45em - 2px, 100%);
  background-size: 0 1px;
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .header-navigation-item.header-navigation-item--small:not(.header-navigation-item--no-hover):hover .header-navigation-item__toggle-icon {
    transform: translateX(5px);
  }
  .header-navigation-item.header-navigation-item--small:not(.header-navigation-item--no-hover):hover .header-navigation-item__text {
    background-size: 24px 1px;
  }
}
.header-navigation-item-highlight {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 8px;
  text-decoration: none;
  color: var(--header-navigation-item-text-color);
  border-bottom: 1px solid var(--header-navigation-item-border-color);
  background-image: linear-gradient(90deg, var(--header-navigation-item-text-background-color-hover) 0%, transparent 100%);
  background-size: 0 100%;
  background-repeat: no-repeat;
  transition-property: background-size;
  transition-duration: var(--timing-base);
  transition-timing-function: cubic-bezier(0.6, 0.14, 0, 1);
  word-break: break-word;
}
.header-navigation-item-highlight .header-navigation-item-highlight__text {
  font-family: var(--heading-font-family);
  font-size: calc(var(--heading-font-size) * 1.375);
  font-weight: 600;
  text-align: start;
  text-decoration: none;
  line-height: 1.43;
  word-break: break-word;
}
.header-navigation-item-highlight .header-navigation-item-highlight__icon-wrapper {
  position: relative;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  transition-property: transform;
  transition-duration: var(--timing-short);
}
.header-navigation-item-highlight .header-navigation-item-highlight__icon-wrapper::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 39px;
  height: 39px;
  border-radius: 100%;
  background-color: var(--header-navigation-item-text-color);
  filter: blur(9px);
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--timing-short);
}
.header-navigation-item-highlight .header-navigation-item-highlight__icon {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.header-navigation-item-highlight .icon {
  width: 24px;
  height: 24px;
}
.header-navigation-item-highlight .header-navigation-item-highlight__toggle-icon {
  display: inline-flex;
  flex-shrink: 0;
  transition-property: transform;
  transition-duration: var(--timing-base);
  margin-inline-start: auto;
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .header-navigation-item-highlight:hover {
    background-size: 100% 100%;
  }
  .header-navigation-item-highlight:hover .header-navigation-item-highlight__toggle-icon {
    transform: translateX(5px);
  }
  .header-navigation-item-highlight:hover .header-navigation-item-highlight__icon-wrapper {
    transform: rotate(-5deg);
  }
  .header-navigation-item-highlight:hover .header-navigation-item-highlight__icon-wrapper::before {
    opacity: 1;
  }
}
.header-navigation-item-highlight:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
  background-size: 100% 100%;
}
.header-navigation-item-highlight:focus-visible .header-navigation-item-highlight__toggle-icon {
  transform: translateX(5px);
}
.header-navigation-item-highlight:focus-visible .header-navigation-item-highlight__icon-wrapper {
  transform: rotate(-5deg);
}
.header-navigation-item-highlight:focus-visible .header-navigation-item-highlight__icon-wrapper::before {
  opacity: 1;
}
.header-navigation-item-highlight.header-navigation-item-highlight--with-active.is-active {
  background-size: 100% 100%;
}
.header-navigation-item-highlight.header-navigation-item-highlight--with-active.is-active .header-navigation-item-highlight__toggle-icon {
  transform: translateX(5px);
}
.header-navigation-item-highlight.header-navigation-item-highlight--with-active.is-active .header-navigation-item-highlight__icon-wrapper {
  transform: rotate(-5deg);
}
.header-navigation-item-highlight.header-navigation-item-highlight--with-active.is-active .header-navigation-item-highlight__icon-wrapper::before {
  opacity: 1;
}
.header-navigation-item-highlight.header-navigation-item-highlight--small {
  padding: 8px;
}
.header-navigation-item-highlight.header-navigation-item-highlight--big {
  padding: 16px;
}
.header-navigation-item-highlight.header-navigation-item-highlight--simple {
  padding: 16px 24px;
}
.header-navigation-item-highlight.header-navigation-item-highlight--simple .header-navigation-item-highlight__icon-wrapper {
  display: none;
}
.header-navigation-item-highlight.header-navigation-item-highlight--simple .header-navigation-item-highlight__text {
  font-size: var(--heading-font-size);
  line-height: 1.5;
}
.header-navigation-item-highlight.header-navigation-item-highlight--hide-border {
  border-bottom: none;
}
.header-navigation-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.header-navigation-block .header-navigation-block__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.header-mobile {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  z-index: var(--layer-pop-out);
  display: flex;
  flex-direction: column;
  visibility: hidden;
  max-width: 420px;
  border-radius: 0;
  height: 100%;
  width: 100%;
  background-color: var(--header-menu-background);
  transform: translateX(-100%);
  transition-property: transform, visibility;
  transition-duration: var(--timing-long);
  transition-timing-function: var(--easing-slov-in-fast-out);
  will-change: transform, visibility;
}
.header-mobile.is-active {
  visibility: visible;
  transform: translateX(0) !important;
}
.header-mobile.is-active .header-mobile__animate.header-mobile__animate--main.need-animate {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  transition-delay: calc(var(--timing-base) + var(--animation-delay));
  transition-duration: var(--timing-base);
}
.header-mobile::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  backdrop-filter: blur(12px);
}
.header-mobile .header-mobile__menu {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
}
.header-mobile.is-child-active .header-mobile__menu-container.header-mobile__menu-container--main {
  overflow: hidden;
}
.header-mobile.is-grand-child-active .header-mobile__menu-container.header-mobile__menu-container--nested {
  overflow: hidden;
}
.header-mobile .header-mobile__menu-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
  overflow: auto;
}
.header-mobile .header-mobile__menu-container-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 14px;
}
.header-mobile .header-mobile__menu-container-inner.header-mobile__menu-container-inner--small-offset {
  padding-top: 16px;
  padding-bottom: 16px;
}
.header-mobile .header-mobile__menu-container-inner.header-mobile__menu-container-inner--medium-offset {
  padding-top: 24px;
  padding-bottom: 24px;
}
.header-mobile .header-mobile__menu-container-inner.header-mobile__menu-container-inner--big-offset {
  padding-top: 32px;
  padding-bottom: 32px;
}
.header-mobile .header-mobile__menu-container-inner.header-mobile__menu-container-inner--small-gap {
  gap: 16px;
}
.header-mobile .header-mobile__menu-container-inner.header-mobile__menu-container-inner--medium-gap {
  gap: 24px;
}
.header-mobile .header-mobile__menu-container-inner.header-mobile__menu-container-inner--big-gap {
  gap: 32px;
}
.header-mobile .header-mobile__menu-header {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px;
}
.header-mobile .header-mobile__menu-header::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  height: 1px;
  bottom: 0;
  background-color: var(--header-menu-border-color);
}
.header-mobile .header-mobile__menu-heading {
  display: block;
  font-size: var(--body-font-size);
  line-height: 16px;
  text-align: center;
  color: var(--header-menu-text-color);
  word-break: break-word;
}
.header-mobile .header-mobile__menu-header-column.header-mobile__menu-header-column--right {
  margin-inline-start: auto;
}
.header-mobile .header-mobile__menu-button {
  margin: -8px;
}
.header-mobile .header-mobile__menu-nested-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: var(--layer-flat);
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--header-menu-background);
  transform: translate(-100%);
  transition-property: transform;
  transition-duration: var(--timing-long);
  transition-timing-function: cubic-bezier(0.6, 0.14, 0, 1);
}
.header-mobile .header-mobile__menu-nested-drawer::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: inherit;
  backdrop-filter: blur(12px);
  transition-property: opacity;
  transition-duration: var(--timing-long);
}
.header-mobile .header-mobile__menu-nested-drawer.is-hidden {
  display: none;
}
.header-mobile .header-mobile__menu-nested-drawer.is-active {
  transform: translate(0) !important;
}
.header-mobile .header-mobile__menu-nested-drawer.is-active.header-mobile__menu-nested-drawer--nested .header-mobile__animate.header-mobile__animate--nested.need-animate {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  transition-delay: calc(var(--timing-base) + var(--animation-delay));
  transition-duration: var(--timing-base);
}
.header-mobile .header-mobile__menu-nested-drawer.is-active.header-mobile__menu-nested-drawer--deep-nested .header-mobile__animate.header-mobile__animate--deep-nested.need-animate {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  transition-delay: calc(var(--timing-base) + var(--animation-delay));
  transition-duration: var(--timing-base);
}
.header-mobile .header-mobile__menu-nested-drawer.header-mobile__menu-nested-drawer--nested {
  z-index: calc(var(--layer-flat) + 1);
}
.header-mobile .header-mobile__menu-nested-drawer.header-mobile__menu-nested-drawer--deep-nested {
  z-index: calc(var(--layer-flat) + 2);
}
.header-mobile .header-mobile__search-input {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 15px 24px;
  border-radius: calc(var(--global-border-radius) * 2);
  border: 1px solid var(--header-menu-border-color);
  text-align: start;
  font-size: var(--body-font-size);
  line-height: 1.5;
  white-space: nowrap;
  color: var(--header-menu-text-color);
  transition-property: border-color;
  transition-duration: var(--timing-base);
}
.header-mobile .header-mobile__search-input .icon {
  width: 20px;
  height: 20px;
  opacity: 0.5;
  transition-property: opacity;
  transition-duration: var(--timing-base);
}
.header-mobile .header-mobile__search-input:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .header-mobile .header-mobile__search-input:hover {
    border-color: var(--header-menu-text-color);
  }
  .header-mobile .header-mobile__search-input:hover .icon, .header-mobile .header-mobile__search-input:hover .header__search-input-label {
    opacity: 1;
  }
}
.header-mobile .header__search-input-label {
  display: block;
  width: 100%;
  opacity: 0.5;
  overflow: hidden;
  text-overflow: ellipsis;
  transition-property: opacity;
  transition-duration: var(--timing-base);
}
.header-mobile .header-mobile__menu-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.header-mobile .header-mobile__menu-list .header-mobile__menu-list-item:last-child {
  margin-bottom: 0;
}
.header-mobile .header-mobile__menu-list-item.header-mobile__menu-list-item--small-offset {
  margin-bottom: 16px;
}
.header-mobile .header-mobile__menu-list-item.header-mobile__menu-list-item--medium-offset {
  margin-bottom: 8px;
}
.header-mobile .header-mobile__menu-list-item.header-mobile__menu-list-item--big-offset {
  margin-bottom: 32px;
}
.header-mobile .header-mobile__additional-menu {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: auto;
}
.header-mobile .header-mobile__additional-menu-link {
  padding-top: 16px;
  padding-bottom: 16px;
}
.header-mobile .header-mobile__localization {
  display: flex;
  flex-wrap: wrap;
  padding-top: 8px;
  padding-bottom: 8px;
  column-gap: 32px;
  row-gap: 16px;
}
.header-mobile .header-mobile__animate.need-animate {
  visibility: hidden;
  opacity: 0;
  transform: translateX(-15px);
  transition-duration: var(--timing-short), var(--timing-short), 0s;
  transition-delay: 0s, 0s, var(--timing-short);
  transition-property: opacity, visibility, transform;
}
.header-mobile .product-card .product-card__title {
  color: var(--product-card-title-color, var(--color-text-primary));
}
.header-mobile .product-card .product-card__vendor {
  color: var(--product-card-vendor-color, var(--color-text-secondary));
}
body.rtl .header-mobile {
  transform: translateX(100%);
}
body.rtl .header-mobile .header-mobile__menu-nested-drawer {
  transform: translateX(100%);
}
.header-mega-menu {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  width: 100%;
  max-height: calc(var(--page-height) - var(--header-height) - var(--header-offset-top) - 16px);
  overflow: hidden;
  transition-property: visibility, opacity, height;
  transition-duration: var(--timing-base);
  transition-timing-function: var(--easing-slov-in-fast-out);
}
.header-mega-menu.force-change-transition {
  transition-property: height;
  transition-duration: var(--timing-base);
}
.header-mega-menu.force-transition {
  transition-delay: 0s;
  transition-duration: 0s;
}
.header-mega-menu.is-active {
  visibility: visible;
  opacity: 1;
}
.header-mega-menu.is-active .header-mega-menu__animate.need-animate {
  transform: translateX(0);
  filter: opacity(1);
  visibility: visible;
  transition-delay: calc(var(--timing-short) + var(--animation-delay));
  transition-duration: var(--timing-base);
}
.header-mega-menu.is-active.force-change-transition {
  transition-delay: var(--animation-delay);
}
.header-mega-menu .header-mega-menu__animate.need-animate {
  visibility: hidden;
  filter: opacity(0);
  transform: translateX(-15px);
  transition-duration: var(--timing-short), var(--timing-short), 0s;
  transition-delay: 0s, 0s, var(--timing-short);
  transition-property: filter, visibility, transform;
}
.header-mega-menu .header-mega-menu__container {
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.header-mega-menu .header-mega-menu__container::-webkit-scrollbar {
  display: none;
}
.header-mega-menu .header-mega-menu__content-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  padding-top: 16px;
  padding-bottom: 32px;
  padding-left: 48px;
  padding-right: 48px;
}
.header-mega-menu .header-mega-menu__grid {
  display: flex;
  gap: 24px;
}
.header-mega-menu .header-mega-menu__grid-column {
  width: 100%;
}
.header-mega-menu .header-mega-menu__grid-column.header-mega-menu__grid-column--banner {
  width: 64%;
  max-width: 609px;
  align-self: flex-start;
}
.header-mega-menu .header-mega-menu__list {
  display: grid;
  width: 100%;
}
.header-mega-menu .header-mega-menu__list.header-mega-menu__list--products-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.header-mega-menu .header-mega-menu__list.header-mega-menu__list--media-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.header-mega-menu .header-mega-menu__list.header-mega-menu__list--main-menu {
  grid-template-columns: repeat(5, 1fr);
  row-gap: 48px;
  column-gap: 24px;
}
.header-mega-menu .header-mega-menu__list.header-mega-menu__list--main-menu-short {
  grid-template-columns: repeat(3, 1fr);
}
.header-mega-menu .header-mega-menu__list-item .product-card .product-card__title {
  position: relative;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1500.98px) {
  .header-mega-menu .header-mega-menu__list-item .product-card {
    height: 100%;
  }
  .header-mega-menu .header-mega-menu__list-item .product-card .product-card__title {
    font-size: var(--body-font-size);
  }
  .header-mega-menu .header-mega-menu__list-item .product-card .product-card__price {
    font-size: calc(var(--body-font-size) * 0.875);
  }
  .header-mega-menu .header-mega-menu__list-item .product-card .product-card__footer-button-wrapper {
    margin-top: 16px;
  }
  .header-mega-menu .header-mega-menu__list-item .product-card .button-circle.button-circle--transform, .header-mega-menu .header-mega-menu__list-item .header-banner-small .button-circle.button-circle--transform {
    min-width: 48px;
    height: 48px;
  }
}
@media (min-width: 1501px) {
  .header-mega-menu .header-mega-menu__list.header-mega-menu__list--products-grid {
    gap: 16px;
    grid-template-columns: repeat(4, 1fr);
  }
  .header-mega-menu .header-mega-menu__list.header-mega-menu__list--media-grid {
    gap: 24px;
  }
}
.header-dropdown {
  position: absolute;
  inset-inline-start: auto;
  top: calc(100% + 4px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  background: var(--header-menu-dropdown-background);
  border-radius: calc(var(--global-border-radius) / 2);
  backdrop-filter: blur(12px);
  transition-property: visibility, opacity, height;
  transition-duration: var(--timing-base);
  transition-timing-function: var(--easing-slov-in-fast-out);
}
.header-dropdown.force-transition {
  transition-delay: 0s;
  transition-duration: 0s;
}
.header-dropdown.header-dropdown--nested {
  transition-property: opacity, visibility, width;
}
.header-dropdown.is-active {
  visibility: visible;
  opacity: 1;
}
.header-dropdown.is-active .header-dropdown__animate.header-dropdown__animate--main.need-animate {
  transform: translate(0);
  opacity: 1;
  visibility: visible;
  transition-delay: calc(var(--timing-short) + var(--animation-delay));
  transition-duration: var(--timing-base);
}
.header-dropdown .header-dropdown__animate.need-animate {
  visibility: hidden;
  opacity: 0;
  transform: translate(-20px);
  transition-duration: var(--timing-short), var(--timing-short), 0s;
  transition-delay: 0s, 0s, var(--timing-short);
  transition-property: opacity, visibility, transform;
}
.header-dropdown .header-dropdown__menu {
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.header-dropdown .header-dropdown__menu::-webkit-scrollbar {
  display: none;
}
.header-dropdown .header-dropdown__menu-list {
  display: flex;
  flex-direction: column;
  min-width: 150px;
  max-width: 400px;
  max-height: 300px;
  width: max-content;
}
.header-burger-menu {
  position: fixed;
  top: calc(var(--header-height) + var(--header-offset-top));
  left: 0;
  right: 0;
  display: flex;
  gap: 8px;
  overflow: hidden;
  bottom: 0;
  padding: 24px 48px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.header-burger-menu.is-active {
  opacity: 1;
  visibility: visible;
}
.header-burger-menu .header-burger-menu__menu {
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}
.header-burger-menu .header-burger-menu__menu.header-burger-menu__menu--main {
  flex-shrink: 0;
  width: min(417px, 33.33%);
  height: 0;
  transform-origin: top;
  transition-property: visibility, opacity, height;
  transition-delay: calc(var(--timing-long) * 0.3), calc(var(--timing-long) * 0.3), 0s;
  transition-duration: calc(var(--timing-long) * 0.7), calc(var(--timing-long) * 0.7), var(--timing-long);
  transition-timing-function: var(--easing-slov-in-fast-out);
}
.header-burger-menu .header-burger-menu__menu.header-burger-menu__menu--nested {
  height: 100%;
  width: 0;
  transform-origin: left;
  transition-property: visibility, opacity, width;
  transition-delay: calc(var(--timing-long) * 0.3), calc(var(--timing-long) * 0.3), 0s;
  transition-duration: calc(var(--timing-long) * 0.7), calc(var(--timing-long) * 0.7), var(--timing-long);
  transition-timing-function: var(--easing-slov-in-fast-out);
}
.header-burger-menu .header-burger-menu__menu.is-active {
  opacity: 1;
  visibility: visible;
}
.header-burger-menu .header-burger-menu__menu.is-active.header-burger-menu__menu--main {
  height: 100%;
  transition-delay: 0s;
}
.header-burger-menu .header-burger-menu__menu.is-active.header-burger-menu__menu--main .header-burger-menu__animate.need-animate {
  transform: translate(0);
  opacity: 1;
  visibility: visible;
  transition-delay: calc(var(--timing-short) + var(--animation-delay));
  transition-duration: var(--timing-base);
}
.header-burger-menu .header-burger-menu__menu.is-active.header-burger-menu__menu--nested {
  width: 100%;
  transition-delay: 0s;
}
.header-burger-menu .header-burger-menu__menu.is-active .header-burger-menu__list.is-active .header-burger-menu__animate.need-animate {
  transform: translate(0);
  opacity: 1;
  visibility: visible;
  transition-delay: calc(var(--timing-short) + var(--animation-delay));
  transition-duration: var(--timing-base);
}
.header-burger-menu .header-burger-menu__menu-container {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--global-border-radius) / 2);
  overflow: hidden;
}
.header-burger-menu .header-burger-menu__menu-container.header-burger-menu__menu-container--main {
  padding: 8px;
}
.header-burger-menu .header-burger-menu__menu-inner-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: auto;
  border-radius: calc(var(--global-border-radius) / 4);
  background-color: var(--header-menu-background);
  backdrop-filter: blur(24px);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.header-burger-menu .header-burger-menu__menu-inner-container::-webkit-scrollbar {
  display: none;
}
.header-burger-menu .header-burger-menu__list {
  display: grid;
}
.header-burger-menu .header-burger-menu__list.header-burger-menu__list--nested {
  padding: 32px 48px;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 48px;
  column-gap: 24px;
}
.header-burger-menu .header-burger-menu__animate.need-animate {
  visibility: hidden;
  opacity: 0;
  transform: translateX(-15px);
  transition-duration: var(--timing-short), var(--timing-short), 0s;
  transition-delay: 0s, 0s, var(--timing-short);
  transition-property: opacity, visibility, transform;
}
.header-banner {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 123%;
  overflow: hidden;
  background: var(--header-banner-background-color);
  border-radius: calc(var(--global-border-radius) * 2);
  border: 1px solid var(--header-banner-border-color);
}
.header-banner .header-banner__ellipse::after, .header-banner .header-banner__ellipse::before {
  position: absolute;
  content: "";
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: var(--header-banner-background-ellipse);
  filter: blur(135px);
}
.header-banner .header-banner__ellipse::after {
  top: -50px;
  left: -50px;
}
.header-banner .header-banner__ellipse::before {
  bottom: -50px;
  right: -50px;
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .header-banner:hover .header-banner__image.header-banner__image--back {
    transform: scale(1.02) rotate(-1deg);
  }
  .header-banner:hover .header-banner__image.header-banner__image--main {
    transform: scale(1.02) rotate(1deg);
  }
}
.header-banner .header-banner__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--img-object-fit);
  object-position: var(--img-desktop-pos);
  transition-property: transform;
  transition-duration: var(--timing-base);
}
.header-banner .header-banner__button-container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 24px;
}
@media (min-width: 1200px) {
  .header-banner {
    padding-top: 122%;
  }
}
.header-banner-small {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 132%;
  overflow: hidden;
  border-radius: calc(var(--global-border-radius) * 2);
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .header-banner-small:hover .header-banner-small__image {
    transform: scale(1.02);
  }
}
.header-banner-small .header-banner-small__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--img-desktop-pos);
  transition-property: transform, opacity;
  transition-duration: var(--timing-base);
}
.header-banner-small .header-banner-small__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  height: 100%;
  padding: 24px;
}
.header-banner-small .header-banner-small__content-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.header-banner-small .header-banner-small__content-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 65%;
  background: linear-gradient(180deg, var(--header-banner-small-overlay-color) 0%, transparent 100%);
}
.header-banner-small .header-banner-small__title {
  position: relative;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: calc(var(--body-font-size) * 1.5);
  font-weight: 700;
  line-height: 1.43;
  text-align: center;
  word-wrap: break-word;
  color: var(--header-banner-small-text-color);
}
.header-banner-small .header-banner-small__text {
  position: relative;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--body-font-size);
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  word-wrap: break-word;
  color: var(--header-banner-small-text-color);
}
.header-banner-small .header-banner-small__button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: auto;
}
@media (min-width: 1200px) {
  .header-banner-small {
    padding-top: 134%;
  }
}
.predictive-search {
  width: auto;
  top: 12px;
  left: 12px;
  right: 12px;
  border-radius: var(--global-border-radius);
  margin: 0 auto;
  background-color: var(--color-background-popup-drawer-alpha, #000);
  backdrop-filter: blur(24px);
  visibility: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition-property: opacity, visibility, transform;
  transition-duration: var(--timing-base);
  transition-timing-function: var(--easing-slov-in-fast-out);
}
.predictive-search.is-active {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
  transition-duration: var(--timing-long);
}
.predictive-search .predictive-search__container {
  position: relative;
  max-width: 1920px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding-top: 38px;
}
.predictive-search .predictive-search__form {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  margin: 0 auto;
}
.predictive-search .predictive-search__close {
  position: absolute;
  top: 16px;
  inset-inline-start: 16px;
  display: flex;
  padding: 0;
  color: var(--color-text-primary);
  transition-property: transform;
  transition-duration: var(--timing-base);
}
.predictive-search .predictive-search__close svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}
.predictive-search .predictive-search__close:focus-visible {
  outline: 2px solid var(--color-text-primary);
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .predictive-search .predictive-search__close:hover {
    transform: rotate(90deg);
  }
}
.predictive-search .predictive-search__search {
  position: relative;
  display: flex;
  padding: 24px 16px 16px;
}
.predictive-search .predictive-search__reset {
  display: none;
  position: absolute;
  right: 84px;
  top: 50%;
  padding: 4px;
  color: var(--color-text-primary);
  transform: translateY(-50%);
  transition-property: transform;
  transition-duration: var(--timing-base);
}
.predictive-search .predictive-search__reset svg {
  width: 16px;
  height: 16px;
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .predictive-search .predictive-search__reset:hover {
    transform: translateY(-50%) rotate(90deg);
  }
}
.predictive-search .predictive-search__input:not(:placeholder-shown) {
  padding-inline-end: 36px;
}
.predictive-search .predictive-search__input:not(:placeholder-shown) ~ .predictive-search__reset {
  display: flex;
}
.predictive-search .predictive-search__input-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  column-gap: 16px;
}
.predictive-search .predictive-search__input {
  border: 1px solid var(--color-border-primary);
  border-radius: 100px;
  background-color: transparent;
  line-height: 1.5;
}
.predictive-search .predictive-search__input::placeholder {
  opacity: 1;
}
.predictive-search .predictive-search__result {
  height: 100%;
  overflow: auto;
  padding: 8px 16px 0;
}
.predictive-search .predictive-search__result::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.predictive-search .predictive-search__result::-webkit-scrollbar-track {
  background-color: transparent;
}
.predictive-search .predictive-search__result::-webkit-scrollbar-thumb {
  border-radius: 15px;
}
.predictive-search .predictive-search__result-empty {
  text-align: center;
}
.predictive-search .predictive-search__tabs {
  display: flex;
  justify-content: center;
  max-width: 100%;
  margin-bottom: 24px;
  border-radius: var(--global-border-radius);
}
.predictive-search .predictive-search__tabs-items {
  display: flex;
  border-bottom: 1px solid var(--color-text-primary-alpha);
  gap: 4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.predictive-search .predictive-search__tabs-items::-webkit-scrollbar {
  display: none;
}
.predictive-search .predictive-search__tabs-button {
  position: relative;
  padding: 12px;
  font-size: var(--body-font-size);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-primary);
  opacity: 0.5;
  transition-property: opacity;
  transition-duration: var(--timing-base);
}
.predictive-search .predictive-search__tabs-button::before {
  content: "";
  position: absolute;
  bottom: -1.5px;
  left: 50%;
  height: 2px;
  width: 0;
  background-color: var(--color-text-primary);
  transform: translateX(-50%);
  transition-property: width;
  transition-duration: var(--timing-base);
}
.predictive-search .predictive-search__tabs-button.is-active {
  opacity: 1;
}
.predictive-search .predictive-search__tabs-button.is-active::before {
  width: 24px;
}
.predictive-search .predictive-search__tabs-button[disabled] {
  color: var(--color-text-secondary);
  opacity: 0.5;
  cursor: default;
}
.predictive-search .predictive-search__result-row {
  display: flex;
  gap: 16px 32px;
  flex-wrap: wrap;
  transform: translateY(0);
  transition-property: opacity, visibility, transform;
  transition-timing-function: var(--easing-ease);
  transition-duration: var(--timing-long);
}
.predictive-search .predictive-search__result-row .article-card__image-wrapper {
  padding-top: 74.27%;
}
.predictive-search .predictive-search__result-row .article-card__description {
  display: none;
}
.predictive-search .predictive-search__result-row.predictive-search__result-row--products .predictive-search__result-col {
  text-align: center;
}
.predictive-search .predictive-search__result-row.visually-hidden {
  visibility: hidden;
  opacity: 0;
  transform: translateY(20px);
}
.predictive-search .predictive-search__result-col {
  width: 100%;
}
.predictive-search .predictive-search__article-card-image-container {
  padding-top: 74.27%;
  border-radius: calc(var(--global-border-radius) * 1.5);
  overflow: hidden;
}
.predictive-search .predictive-search__featured-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 32px 0;
}
.predictive-search .predictive-search__apply {
  padding: 16px;
}
.predictive-search .predictive-search__featured-items-title {
  margin-bottom: 16px;
  font-size: calc(var(--heading-font-size) * 1.125);
  font-style: normal;
  font-weight: 500;
  line-height: 1.333;
}
.predictive-search .predictive-search__featured-item-link {
  display: block;
  padding: 8px 16px;
  border: 1px solid var(--color-border-secondary);
  border-radius: calc(var(--global-border-radius) / 2);
  color: var(--color-text-primary);
  font-size: var(--body-font-size);
  line-height: 1.5;
  text-decoration: none;
  transition-property: border-color;
  transition-duration: var(--timing-base);
}
@media (-moz-touch-enabled: 0), (hover: hover), (pointer: fine) {
  .predictive-search .predictive-search__featured-item-link:hover {
    border-color: var(--color-border-primary);
  }
}
.predictive-search .predictive-search__footer {
  padding: 16px;
  text-align: center;
}
.predictive-search:has(.predictive-search__result-row) {
  bottom: 16px;
}
.predictive-search .predictive-search__featured-items-title.need-animate,
.predictive-search .predictive-search__featured-item.need-animate {
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--timing-base);
}
.predictive-search.is-active .predictive-search__featured-items-title.need-animate,
.predictive-search.is-active .predictive-search__featured-item.need-animate {
  opacity: 1;
}
.predictive-search.is-active .predictive-search__featured-item.need-animate {
  transition-delay: var(--delay-step);
}
@media (min-width: 576px) {
  .predictive-search .predictive-search__form {
    max-width: 1032px;
  }
  .predictive-search .predictive-search__result-row .predictive-search__result-col {
    width: calc(50% - 16px);
  }
}
@media (min-width: 992px) {
  .predictive-search .predictive-search__container {
    padding: 32px 32px 0;
  }
  .predictive-search .predictive-search__tabs {
    margin-bottom: 32px;
  }
  .predictive-search .predictive-search__tabs-items {
    gap: 16px;
  }
  .predictive-search .predictive-search__result-row {
    padding-bottom: 16px;
    gap: 32px;
  }
  .predictive-search .predictive-search__result-row .predictive-search__result-col {
    width: calc(33.333% - 21.333px);
  }
  .predictive-search .predictive-search__result-row.predictive-search__result-row--products {
    gap: 32px 24px;
  }
  .predictive-search .predictive-search__result-row.predictive-search__result-row--products .predictive-search__result-col {
    width: calc(25% - 18px);
  }
  .predictive-search .predictive-search__footer {
    padding: 16px 24px 32px;
  }
}
@media (min-width: 1200px) {
  .predictive-search .predictive-search__container {
    padding-top: 0;
  }
  .predictive-search .predictive-search__close {
    top: 38px;
    inset-inline-end: 2.5%;
    inset-inline-start: auto;
  }
}
@media (min-width: 1501px) {
  .predictive-search .predictive-search__form {
    max-width: 1232px;
  }
}
.menu-decoration {
  position: relative;
}
.menu-decoration.is-active .menu-decoration__decoration-border-part {
  visibility: visible;
  opacity: 1;
  transition-duration: var(--timing-base);
  transition-delay: 0s, 0s, var(--timing-base), var(--timing-base);
  transition-property: stroke-dasharray, stroke-dashoffset, opacity, visibility;
}
.menu-decoration.is-transition-disabled .menu-decoration__decoration-border-part {
  transition-duration: 0s;
}
.menu-decoration .menu-decoration__decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.menu-decoration .menu-decoration__decoration-border {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  color: var(--menu-decoration-border-color);
}
.menu-decoration .menu-decoration__decoration-border-part {
  visibility: hidden;
  opacity: 0;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  color: var(--menu-decoration-border-part-color);
}












/* ===============================
   NEON FRAME EDITOR – CLEAN STYLES
   =============================== */

/* Overall wrapper */
#neon-frame-app {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  color: #ffffff;
  padding: 3rem 1rem 4rem;
  background: transparent;
  max-width: 1400px;
  margin: 0 auto;

  /* Page-load fade-in */
  opacity: 0;
  transform: translateY(10px);
  filter: blur(2px);
  transition: opacity 1.1s ease, transform 1s ease, filter 1s ease;
  will-change: opacity, transform, filter;
}

#neon-frame-app.nfs-ready {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ---------- STEP 1: UPLOAD GATE ---------- */

.nfs-upload-gate {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto 2.4rem;
  padding: 2.4rem 1.9rem 2.6rem;
  border-radius: 28px;
  background: radial-gradient(circle at top left, #243447, #14141f);
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(0, 0, 0, 0.4);
  text-align: center;
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
}

.nfs-upload-gate--hidden {
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
  pointer-events: none;
}

.nfs-upload-card {
  max-width: 520px;
  margin: 0 auto;
}

.nfs-step-label {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #cfd6ff;
  opacity: 0.9;
  margin-bottom: 0.4rem;
}

.nfs-heading {
  font-size: 24px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  font-weight: 700;
  text-align: center;
  background: linear-gradient(90deg, #00f5ff, #ffffff, #ff7bff);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(0, 255, 255, 0.7);
}

.nfs-subheading {
  font-size: 0.9rem;
  opacity: 0.85;
  text-align: center;
 
}

.nfs-upload-hint {
  font-size: 0.8rem;
  opacity: 0.75;
  margin-top: 0.7rem;
}

/* Upload button */
.nfs-browse-btn {
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 2rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background-image: linear-gradient(90deg, #29e3ff, #b82bff);
  color: #000;
  font-weight: 600;
  font-size: 0.98rem;
  box-shadow: 0 0 28px rgba(184, 43, 255, 0.6);
  transition: box-shadow 150ms ease, transform 150ms ease;
}

.nfs-browse-btn:hover {
  box-shadow: 0 0 36px rgba(184, 43, 255, 0.8);
  transform: translateY(-1px);
}

/* ---------- STEP 2: EDITOR ---------- */

.nfs-designer {
  max-width: 1320px;
  margin: 0 auto;
  background: rgba(8, 8, 15, 0.9);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
  padding: 1.8rem 1.6rem 2.2rem;
  backdrop-filter: blur(18px);
  transition: opacity 220ms ease, transform 220ms ease;
}

/* Greyed-out state before upload */
.nfs-designer--disabled {
  opacity: 0.35;
  filter: grayscale(0.7);
  pointer-events: none;
}

.nfs-designer-header {
  text-align: center;
  
}

/* Layout */
#neon-frame-product-section .nfs-main-layout{
  gap: 2.2rem;
  align-items: stretch;
}

/* Desktop: force 2-column layout */
@media (min-width: 769px) {
  #neon-frame-product-section .nfs-main-layout{
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.4fr);
    gap: 2.2rem;
    align-items: stretch;
  }
}

/* Mobile: stacked */
@media (max-width: 768px) {
  #neon-frame-product-section .nfs-main-layout{
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.35rem;
  }
}

/* ------------------------------
   LEFT CARD (Canvas) – unchanged
   ------------------------------ */
#neon-frame-product-section .nfs-canvas-column{
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  padding: 1rem 0.7rem;

  box-shadow:
    0 26px 60px rgba(0,0,0,0.65),
    0 0 0 1px rgba(0,0,0,0.35);

  background:
      radial-gradient(circle at top right, rgba(255,255,255,0.10), transparent 20%), /* brighter top right */

    radial-gradient(circle at top left, rgba(41,227,255,0.20), transparent 90%),
    radial-gradient(circle at bottom right, rgba(184,43,255,0.14), transparent 75%),
    rgba(18,18,30,0.96);
}

#neon-frame-product-section .nfs-canvas-column::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 0 32px rgba(41,227,255,0.08),
    inset 0 0 46px rgba(184,43,255,0.06);
}

/* Canvas area */
.nfs-canvas-wrapper {
  width: 100%;
  border-radius: 20px;
  border: 2px solid rgba(255,255,255,0.14);
  background: #000;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  min-height: 420px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.35),
    0 18px 40px rgba(0,0,0,0.55);

  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.nfs-zoom-layer{
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
}

#nfs-canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* Canvas header actions */
.nfs-canvas-header{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 0.75rem;
  width: 100%;
  margin-bottom: 0.7rem;
  flex-wrap: wrap;
}

.nfs-canvas-btn {
  border-radius: 6px;
  padding: 0.45rem 1.1rem;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;

  background: rgba(15, 15, 25, 0.75);
  color: #ffffff;

  border: 1px solid rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);

  transition: transform 120ms ease,
              box-shadow 120ms ease,
              border-color 120ms ease;
}

.nfs-canvas-btn:hover {
  transform: translateY(-1px);
  border-color:rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 14px rgba(153, 0, 254, 0.65);
}

.nfs-canvas-btn:active{
  transform: translateY(1px) scale(0.96);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.95),
    inset 0 0 0 2px rgba(255,255,255,0.95);
}

@media (hover: hover) and (pointer: fine){
  .nfs-canvas-btn:hover{
    box-shadow:
      inset 0 0 0 2px rgba(255,255,255,0.90),
      0 0 14px rgba(184,43,255,0.35);
  }
}


/* ------------------------------
   RIGHT COLUMN: NOW A CONTAINER
   (no background of its own)
   ------------------------------ */
#neon-frame-product-section .nfs-controls-column{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;

  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* space between the two separate panels */
}

/* The two separate cards on the right */
#neon-frame-product-section .nfs-controls-card,
#neon-frame-product-section .nfs-checkout-card{
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  padding: 1.2rem 1.4rem;

  box-shadow:
    0 26px 60px rgba(0,0,0,0.65),
    0 0 0 1px rgba(0,0,0,0.35);

  background:
    radial-gradient(circle at top left, rgba(41,227,255,0.20), transparent 60%),
    radial-gradient(circle at bottom right, rgba(184,43,255,0.14), transparent 55%),
    rgba(18,18,30,0.96);
}

#neon-frame-product-section .nfs-controls-card::before,
#neon-frame-product-section .nfs-checkout-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 0 32px rgba(41,227,255,0.08),
    inset 0 0 46px rgba(184,43,255,0.06);
}

/* Tool group / labels */
#neon-frame-product-section .nfs-tool-group {
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top:10px;
  
}

#neon-frame-product-section .nfs-label {
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  opacity: 0.95;
  display:block;
}

/* Mode toggle */
.nfs-mode-toggle-buttons {
  display: flex;
  gap: 0.6rem;
}





/* =========================================================
   NFS MODE TOGGLE — FLUSH + QUIET (phone-first)
   Wrapper: .nfs-mode-toggle-buttons
   Buttons: .nfs-mode-btn (+ .nfs-mode-btn--active)
   ========================================================= */

.nfs-mode-toggle{ padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; }

.nfs-mode-toggle-buttons{
  position: relative;
  display: flex;
  gap: 0;
  padding: 4px;                 /* tighter */
  border-radius: 999px;
  overflow: hidden;

  background: rgba(0,0,0,0.50);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 10px 24px rgba(0,0,0,0.38);
    margin-bottom: 4px;
}

/* Sliding highlight */
.nfs-mode-toggle-buttons::before{
  content:"";
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius: 999px;

  background: linear-gradient(90deg, rgba(50,240,255,0.95), rgba(184,43,255,0.95));
  box-shadow:
    0 0 14px rgba(184,43,255,0.42),
    0 10px 18px rgba(0,0,0,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.18);

  transform: translateX(0%);
  transition: transform 650ms cubic-bezier(.18,.95,.18,1);

  z-index: 1;

  /* White outline for selected pill */
outline: 1.5px solid rgba(255,255,255,0.85);
outline-offset: -1.5px;

}

/* Move highlight when Describe is active */
.nfs-mode-toggle-buttons:has(#nfs-mode-describe.nfs-mode-btn--active)::before{
  transform: translateX(100%);
}

.nfs-mode-btn{
  flex: 1;
  position: relative;
  z-index: 2;

  border: 0 !important;
  background: transparent !important;
  border-radius: 999px !important;

  /* quieter typography */
  padding: 10px 12px !important;           /* smaller on phone */
  font-weight: 750 !important;
  text-transform: none !important;         /* stop shouting */
  letter-spacing: 0 !important;            /* remove obnoxious spacing */
  font-size: 11.5px !important;
  line-height: 1.05;

  color: rgba(255,255,255,0.82) !important;
  transition: color 220ms ease, transform 160ms ease, opacity 220ms ease;
  
}

/* Active text: dark on bright slider */
.nfs-mode-btn--active{
  color: rgba(7,7,10,0.92) !important;
}

/* Inactive: slightly softer */
.nfs-mode-btn:not(.nfs-mode-btn--active){
  opacity: 0.92;
}

/* Tap feel */
.nfs-mode-btn:active{
  transform: scale(0.992);
}

/* Slightly larger on desktop */
@media (min-width: 900px){
  .nfs-mode-toggle-buttons{ padding: 5px; }
  .nfs-mode-toggle-buttons::before{
    top: 5px; left: 5px;
    width: calc(50% - 5px);
    height: calc(100% - 10px);
  }
  .nfs-mode-btn{
    padding: 11px 14px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .nfs-mode-toggle-buttons::before{ transition: none !important; }
}





.nfs-label{
  display: block;
  width: 100%;
  

  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  line-height: 1;
  padding: 0;
  margin: 0 0 0.15rem 0;   /* ⬅️ bottom spacing */

  font-size: clamp(0.75rem, 2.5vw, 1rem);
  letter-spacing: 0;
word-spacing: 0;
}



.nfs-mode-panel--hidden { display:none; }

/* Brush size slider */
#neon-frame-product-section #nfs-brush-size,
#neon-frame-product-section #nfs-brush-size-mobile {
  width: 100%;
  height: 14px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  margin: 0.35rem 0 0.15rem;
  cursor: pointer;
}

/* Track */
#neon-frame-product-section #nfs-brush-size::-webkit-slider-runnable-track,
#neon-frame-product-section #nfs-brush-size-mobile::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.70);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}

/* Thumb */
#neon-frame-product-section #nfs-brush-size::-webkit-slider-thumb,
#neon-frame-product-section #nfs-brush-size-mobile::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -9px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.95);
  background: linear-gradient(90deg, #32f0ff, #f044ff);
  box-shadow: 0 10px 18px rgba(0,0,0,0.45), 0 0 18px rgba(184,43,255,0.55);
}

/* Colour row + swatches */
#neon-frame-product-section .nfs-swatch-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin: 0.45rem 0 0.6rem;
}

#neon-frame-product-section .nfs-swatch {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.25);
  box-shadow: 0 8px 16px rgba(0,0,0,0.35);
  cursor:pointer;
}

#neon-frame-product-section #nfs-brush-color {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.25);
  background: transparent;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(0,0,0,0.35);
}

/* Description textarea */
.nfs-textarea {
  width: 100%;
  min-height: 160px;
  border-radius: 16px;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(7, 7, 12, 0.95);
  color: #fff;
  font-size: 0.85rem;
  resize: vertical;
}

.nfs-description-hint {
  font-size: 0.75rem;
  opacity: 0.8;
}



/* Selects */
#frame-size,
#power-option {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(7, 7, 12, 0.9);
  color: #fff;
  font-size: 0.85rem;
}

/* --------- CHECKOUT CARD (3rd panel) --------- */

/* Price pill same width/feel as button */
#neon-frame-product-section .nfs-price-pill{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 1.05rem 1.2rem;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  color: #fff;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Status text: only show if it has text */
.nfs-status {
  margin: 0.6rem 0 0.8rem;
  font-size: 0.8rem;
  min-height: 1.1em;
  opacity: 0.9;
}
.nfs-status:empty { display: none; }









/* =========================================================
   NFS CTA — NEON GLASS "IRRESISTIBLE"
   FORCED LEFT ➜ RIGHT (by reversing sweep travel)
   Flash repeats every 4 seconds
   Single source of truth
   ========================================================= */

.nfs-btn-primary,
#nfs-add-to-cart{
  position: relative;
  overflow: hidden;
  isolation: isolate;

  width: 100%;
  padding: 1.7rem 2.6rem;
  border-radius: 999px !important;
  border: 0 !important;
  outline: none !important;

  font-weight: 850;
  font-size: 1.1rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;

  background:
    radial-gradient(120% 180% at 50% -20%, rgba(120,80,255,0.22), transparent 55%),
    radial-gradient(140% 200% at 10% 120%, rgba(50,240,255,0.10), transparent 55%),
    linear-gradient(180deg, rgba(15,15,22,0.92), rgba(6,6,10,0.92)) !important;

  color: #fff !important;

  box-shadow:
    0 10px 22px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.10) inset,
    0 0 0 2px rgba(255,255,255,0.10) inset,
    0 0 26px rgba(184, 43, 255, 0.55),
    0 0 70px rgba(50, 240, 255, 0.22);

  transform: translateZ(0);
  will-change: transform, box-shadow, filter;

  transition:
    transform 1s cubic-bezier(.2,.8,.2,1),
    box-shadow 1s ease,
    filter 1s ease;
}

/* Neon outline ring */
.nfs-btn-primary::before,
#nfs-add-to-cart::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 999px;
  padding: 3px;

  background: linear-gradient(90deg, #32f0ff, #9b4dff, #f044ff);

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  pointer-events:none;
  z-index: 4;

  filter:
    drop-shadow(0 0 14px rgba(50,240,255,0.75))
    drop-shadow(0 0 22px rgba(240,68,255,0.70))
    drop-shadow(0 0 34px rgba(184,43,255,0.55));
}

/* Glass sheen layer */
.nfs-btn-primary::after,
#nfs-add-to-cart::after{
  content:"";
  position:absolute;
  inset: 4px;
  border-radius: 999px;
  pointer-events:none;
  z-index: 3;

  background:
    /* sweep band */
    linear-gradient(
      90deg,
      rgba(255,255,255,0.00) 35%,
      rgba(255,255,255,0.42) 48%,
      rgba(255,255,255,0.14) 58%,
      rgba(255,255,255,0.00) 70%
    ),
    /* cyan edge bloom */
    radial-gradient(140% 180% at 18% 35%, rgba(50,240,255,0.12), transparent 55%),
    /* purple depth */
    radial-gradient(150% 190% at 85% 85%, rgba(87,50,152,0.28), transparent 60%),
    /* top reflection band */
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.00) 55%),
    /* micro grain */
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.018) 0px,
      rgba(255,255,255,0.018) 1px,
      rgba(255,255,255,0.00) 2px,
      rgba(255,255,255,0.00) 6px
    );

  background-size: 240% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;

  opacity: 0.92;

  /* 4 second loop */
  animation: nfsGlassSweep 2.5s ease-in-out infinite;
}

/* Hover / press feel */
.nfs-btn-primary:hover,
#nfs-add-to-cart:hover{
  transform: translateY(-2px) scale(1.018);
  filter: brightness(1.06) saturate(1.12);
}

.nfs-btn-primary:active,
#nfs-add-to-cart:active{
  transform: translateY(2px) scale(0.988);
  filter: brightness(0.98) saturate(1.08);
}

/* Pause sweep on hover/tap */
.nfs-btn-primary:hover::after,
#nfs-add-to-cart:hover::after,
.nfs-btn-primary:active::after,
#nfs-add-to-cart:active::after{
  animation-play-state: paused;
}

/* =========================================================
   FORCED direction:
   If you are SEEING right→left, we reverse the travel here.
   This makes it go the opposite way on-screen.
   ========================================================= */
@keyframes nfsGlassSweep{
  0%{
    /* start from the OTHER side */
    background-position: 220% 50%, 0 0, 0 0, 0 0, 0 0;
    opacity: 0.85;
  }
  95%{
    /* travel across */
    background-position: -220% 50%, 0 0, 0 0, 0 0, 0 0;
    opacity: 1;
  }
  100%{
    background-position: -220% 50%, 0 0, 0 0, 0 0, 0 0;
    opacity: 0.9;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .nfs-btn-primary::after,
  #nfs-add-to-cart::after{
    animation: none !important;
  }
}





.nfs-variant-error{
  margin-top: .55rem;
  font-size: .92rem;
  line-height: 1.2;
  color: #ff3b3b;              /* 🔴 red */
  font-weight: 700;
  text-shadow: 0 0 10px rgba(255,59,59,.35);
  text-align: center; 
}

.nfs-variant-missing{
  outline: 2px solid rgba(255, 0, 0, 0.95) !important; /* keep white outline */
  outline-offset: 3px;
  border-radius: 12px;
}

.nfs-variant-missing{
  animation: nfsShake .45s ease;
}

@keyframes nfsShake{
  0%{ transform: translateX(0); }
  25%{ transform: translateX(-4px); }
  50%{ transform: translateX(4px); }
  75%{ transform: translateX(-3px); }
  100%{ transform: translateX(0); }
}


/* Canvas validation error */
#nfs-canvas-wrapper.nfs-editor-missing{
  outline: 2px solid rgba(255,59,59,.95);
  outline-offset: 6px;
  border-radius: 18px;
}

/* Canvas validation error (OVER the photo, not below it) */
#nfs-canvas-wrapper .nfs-editor-error{
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 60;              /* above the canvas + overlays */
  pointer-events: none;

  padding: clamp(7px, 2.2vw, 10px) clamp(9px, 2.6vw, 12px);
  border-radius: 14px;

  font-size: clamp(.62rem, 1.25vw, .78rem);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;

  color: #fff;
  background: rgba(255,59,59,0.22);
  border: 1px solid rgba(255,59,59,0.55);
  text-shadow: 0 0 10px rgba(255,59,59,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}







/* Mode panel transition */
.nfs-mode-panel--hidden{
  display: none !important;
}

/* Active panel entrance animation */
.nfs-mode-panel--anim-in{
  animation: nfsPanelIn 1.8s cubic-bezier(.18,.85,.22,1);
}


@keyframes nfsPanelIn{
  from{
    opacity: 0;
    transform: translateY(4px) scale(.995);
    filter: blur(.8px);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .nfs-mode-panel--anim-in{ animation: none !important; }
}



/* ---------- INTEGRATION UTILITIES ---------- */

#neon-frame-product-section .shopify-app-block,
#neon-frame-product-section .shopify-app-block * {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0);
  white-space: nowrap !important;
}

#neon-frame-product-section .product-form__buttons,
#neon-frame-product-section .product-form,
#neon-frame-product-section .shopify-payment-button,
#neon-frame-product-section .product__info-button,
#neon-frame-product-section button[name="add"],
#neon-frame-product-section .product__add-to-cart {
  display: none !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
  #neon-frame-app {
    padding: 2.2rem 0.9rem 3rem;
  }

  .nfs-canvas-wrapper {
    min-height: 260px;
  }

  .nfs-heading {
    font-size: 15px;
    margin-bottom: 6px;
    letter-spacing: 0.12em;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
  }

  .nfs-subheading {
    font-size: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #neon-frame-app {
    transition: none;
    transform: none;
    filter: none;
  }
}

/* ========= FIX SWATCHES (PASTE AT VERY BOTTOM) ========= */

/* Base swatch look (keep background visible) */
#neon-frame-product-section .nfs-swatch{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgb(0, 0, 0);
  cursor: pointer;
  padding: 0;
  box-shadow: 0 8px 16px rgba(0,0,0,0.35);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  background: #111; /* fallback so they never look empty */
}

#neon-frame-product-section .nfs-swatch:hover{
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.9);
}

#neon-frame-product-section .nfs-swatch--active{
  border-color: #fff;
  transform: scale(1.05);

  box-shadow:
    0 0 0 3px #000,
    0 0 0 3px rgba(255,255,255,0.65),
    0 0 10px rgba(255,255,255,0.65);
}

#neon-frame-product-section .nfs-swatch--active::after{
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 900;
  color: #000;
  text-shadow: 0 0 4px rgba(255,255,255,0.8);
}



/* Your actual swatch colors (MATCH your HTML data-color values) */
#neon-frame-product-section .nfs-swatch[data-color="#ffffff"]{ background:#ffffff !important; }
#neon-frame-product-section .nfs-swatch[data-color="#ff0000"]{ background:#ff0000 !important; }
#neon-frame-product-section .nfs-swatch[data-color="#ff910f"]{ background:#ff910f !important; }
#neon-frame-product-section .nfs-swatch[data-color="#007aff"]{ background:#007aff !important; }
#neon-frame-product-section .nfs-swatch[data-color="#ffd400"]{ background:#ffd400 !important; }
#neon-frame-product-section .nfs-swatch[data-color="#ff0096"]{ background:#ff0096 !important; }
#neon-frame-product-section .nfs-swatch[data-color="#008000"]{ background:#008000 !important; }
#neon-frame-product-section .nfs-swatch[data-color="#7d00ff"]{ background:#7d00ff !important; }
#neon-frame-product-section .nfs-swatch[data-color="#00ffff"]{ background:#00ffff !important; }


/* Rainbow swatch */
#neon-frame-product-section .nfs-swatch--rainbow{
  background: conic-gradient(red, orange, yellow, green, cyan, blue, violet, red) !important;
  position: relative;
  overflow: hidden;
}
#neon-frame-product-section .nfs-swatch--rainbow input[type="color"]{
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* --- FIX: add spacing between price pill + button --- */
#neon-frame-product-section .nfs-checkout-card{
  display: flex;
  flex-direction: column;
  gap: 12px;              /* <- this creates the space */
}

/* extra safety (in case another rule removes gap) */
#neon-frame-product-section .nfs-checkout-card .nfs-price-pill{
  margin-bottom: 2px;     /* <- optional */
}

.cart-item__desc-toggle{
  color:#ffd400;
  text-decoration:underline;
  cursor:pointer;
}
.cart-item__desc-toggle:hover{
  opacity:.9;
}

/s visible long enough) ===== */

/* Make sure wrapper is the positioning context */
.nfs-canvas-wrapper{ position:relative; }

/* Ensure zoomLayer is below the hint */
.nfs-zoom-layer{ z-index: 1; }



/* ===============================
   MOBILE: Canvas action buttons
   =============================== */
@media (max-width: 768px) {

  .nfs-canvas-header{
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: center;
  }

  .nfs-canvas-btn{
    padding: 0.35rem 0.7rem;
    font-size: 0.7rem;
    white-space: nowrap;
  }
}

/* ===============================
   STEP 2 SNAP UP FIX
   =============================== */

/* When upload gate is hidden, remove its space completely */
.nfs-upload-gate--hidden {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* Pull Step 2 editor closer to header */
#nfs-editor {
  margin-top: -32px; /* desktop + mobile */
}

@media (max-width: 768px) {
  #nfs-editor {
    margin-top: -20px;
  }
}

/* When Step 1 is hidden, remove its space completely */
#nfs-upload-gate.nfs-upload-gate--hidden {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Pull Step 2 up (desktop + mobile) */
#nfs-editor {
  margin-top: 0 !important;
}

/* If your theme adds spacing around the whole section, this helps too */
#neon-frame-app {
  padding-top: 0 !important;
}

/* =========================================
   STEP 1 – UPLOAD CTA EMPHASIS
   ========================================= */

#nfs-upload-gate .nfs-browse-btn {
  position: relative;
  z-index: 1;
}

#nfs-upload-gate .nfs-browse-btn::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  border: 2px dashed rgba(140, 200, 255, 0.85);
  pointer-events: none;
  animation: nfs-dash-pulse 1.8s ease-in-out infinite;
}

#nfs-upload-gate .nfs-browse-btn::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(140, 200, 255, 0.25),
    transparent 70%
  );
  opacity: 0.8;
  pointer-events: none;
}

@keyframes nfs-dash-pulse {
  0% {
    opacity: 0.4;
    transform: scale(0.98);
  }
  50% {
    opacity: 1;
    transform: scale(1.03);
  }
  100% {
    opacity: 0.4;
    transform: scale(0.98);
  }
}

/* =========================================
   STEP 1 spacing + make upload button "pop"
   ========================================= */

#nfs-upload-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

#nfs-upload-gate .nfs-step-title,
#nfs-upload-gate h2,
#nfs-upload-gate .step-title {
  margin-top: -18px !important;
  margin-bottom: 6px !important;
}

#nfs-upload-gate .nfs-step-subtitle,
#nfs-upload-gate p,
#nfs-upload-gate .step-subtitle {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

#nfs-upload-gate .nfs-browse-btn,
#nfs-upload-gate button,
#nfs-upload-gate .upload-btn {
  position: relative;
  transform: translateZ(0);
  
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  filter: saturate(1.15) contrast(1.05);
}



#nfs-upload-gate .nfs-upload-note,
#nfs-upload-gate small,
#nfs-upload-gate .upload-note {
  margin-top: 16px !important;
  opacity: .9;
}

#nfs-upload-gate p,
#nfs-upload-gate .nfs-upload-subtext,
#nfs-upload-gate .nfs-upload-note,
#nfs-upload-gate .upload-note,
#nfs-upload-gate .help-text {
  margin-top: 20px !important;
}

#nfs-upload-gate .nfs-browse-btn,
#nfs-upload-gate .upload-btn {
  margin-bottom: 16px !important;
}

/* ===============================
   STEP 1 – VISUAL POSITIONING ONLY
   =============================== */

#nfs-upload-gate .nfs-step-label{
  transform: translateY(-6px);
}
#nfs-upload-gate .nfs-heading{
  transform: translateY(-10px);
}


#nfs-upload-gate .nfs-browse-btn{
  transform: translateY(10px);
}

#nfs-upload-gate .nfs-upload-hint{
  display: block;
  transform: translateY(18px);
}

/* =========================================================
   STEP 1 – MOBILE ONLY spacing tweaks (PASTE LAST)
   ========================================================= */

@media (max-width: 768px){

  #nfs-upload-gate .nfs-heading{
    margin: 0 0 6px !important;
    line-height: 1.15 !important;
  }
  #nfs-upload-gate .nfs-subheading{
    
    line-height: 1.25 !important;
  }

  #nfs-upload-gate .nfs-browse-btn{
    margin-top: 12px !important;
  }

  #nfs-upload-gate .nfs-upload-hint{
    position: relative;
    top: 18px;
    margin-top: 0 !important;
  }
}

/* ===============================
   STEP 1 – MOBILE ONLY TITLE TUNE
   =============================== */

@media (max-width: 768px) {

  #nfs-upload-gate .nfs-step-label {
    margin-bottom: 2px !important;
  }

  #nfs-upload-gate .nfs-heading {
    margin-top: -20px !important;
    
  }

 


  #nfs-upload-gate .nfs-upload-hint {
    
    opacity: 0.65;
  }

  

}

/* ===============================
   STEP 1 – DESKTOP ONLY FINAL TUNE
   =============================== */

@media (min-width: 769px) {

  #nfs-upload-gate .nfs-upload-card{
    max-width: 760px !important;
    margin: 0 auto !important;
  }

  #nfs-upload-gate .nfs-step-label{
    margin-bottom: 2px !important;
  }

  #nfs-upload-gate .nfs-heading{
    
    margin-bottom: 8px !important;
  }

  
  #nfs-upload-gate .nfs-browse-btn{
    width: min(720px, 92%) !important;
    justify-content: center;
    padding: 1.05rem 2.4rem !important;
    font-size: 1.05rem !important;

    margin-top: 20px !important;
    margin-bottom: 14px !important;
  }

  #nfs-upload-gate .nfs-upload-hint{
    margin-top: 22px !important;
    margin-bottom: -6px !important;
    opacity: 0.65;
  }
}




@media (max-width: 768px) {

  #nfs-upload-gate .nfs-browse-btn {
    width: 95%;
    max-width: 300px;
    padding: 1.1rem 1.4rem;
    font-size: 1.05rem;
  }

  #nfs-upload-gate .nfs-browse-btn {
    margin-left: auto;
    margin-right: auto;
  }
}

/* =========================================
   STEP 1 – 3D POP / SHINE (ALL DEVICES)
   ========================================= */

.nfs-upload-gate{
  position: relative;
  overflow: hidden;
}

.nfs-upload-gate::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:55%;
  border-radius:28px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.18),
    rgba(255,255,255,0.06),
    transparent
  );
  pointer-events:none;
  z-index: 0;
}

.nfs-upload-gate::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:28px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -8px 20px rgba(0,0,0,0.45),
    0 24px 48px rgba(0,0,0,0.45);
  pointer-events:none;
  z-index: 0;
}

.nfs-upload-gate > *{
  position: relative;
  z-index: 1;
}

.nfs-upload-gate .nfs-browse-btn{
  position: relative;
  z-index: 2;
}

.nfs-upload-gate .nfs-browse-btn::before{
  content:"";
  position:absolute;
  inset:-28px;
  border-radius:999px;
  background: radial-gradient(
    circle,
    rgba(120,200,255,0.25),
    rgba(184,43,255,0.18),
    transparent 70%
  );
  pointer-events:none;
  z-index:-1;
}

@media (min-width: 769px){
  .nfs-upload-gate::after{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.22),
      inset 0 -10px 26px rgba(0,0,0,0.50),
      0 30px 70px rgba(0,0,0,0.55);
  }
}

/* =========================================
   STEP 2 – 3D POP / SHINE (ALL DEVICES)
   ========================================= */

.nfs-designer{
  position: relative;
  overflow: hidden;
}

.nfs-designer::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:55%;
  border-radius:24px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.16),
    rgba(255,255,255,0.06),
    transparent
  );
  pointer-events:none;
  z-index: 0;
}

.nfs-designer::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -10px 22px rgba(0,0,0,0.55),
    0 26px 56px rgba(0,0,0,0.55);
  pointer-events:none;
  z-index: 0;
}

.nfs-designer > *{
  position: relative;
  z-index: 1;
}

.nfs-designer{
  box-shadow:
    0 30px 60px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.05),
    0 0 34px rgba(41,227,255,0.08),
    0 0 34px rgba(184,43,255,0.08);
}

@media (max-width: 768px){
  #nfs-upload-gate .nfs-subheading{
    font-size: 0.85rem;
  }
}

/* ===== STOP UPLOAD BUTTON BOUNCING (all devices) ===== */
#nfs-upload-gate .nfs-browse-btn{
  transform: none !important;
}

#nfs-upload-gate .nfs-browse-btn:hover,
#nfs-upload-gate .nfs-browse-btn:active,
#nfs-upload-gate .nfs-browse-btn:focus{
  transform: none !important;
}

#nfs-upload-gate .nfs-browse-btn:active{
  filter: brightness(0.98);
}

/* ===============================
   STEP 1 – INFO TOOLTIP (NEW)
   =============================== */

/* anchor inside the Step 1 card */
#nfs-upload-gate .nfs-upload-card{
  position: relative;
}

/* bottom-right */
#nfs-upload-gate .nfs-info-wrap{
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 999;
}

#nfs-upload-gate .nfs-info-btn{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(27, 113, 224, 0.63);
  color: #fff;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  
}





/* bubble */
#nfs-upload-gate .nfs-info-box{
  position: absolute;
  right: 0;
  bottom: 46px;
  width: min(380px, 88vw);
  padding: 12px 12px;
  border-radius: 14px;
  background: rgb(43, 36, 36);
  border: 1px solid rgba(0,0,0,0.4);
  box-shadow: 0 4px 10px rgba(27, 113, 224, 0.63);

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
  pointer-events: none;
}

#nfs-upload-gate .nfs-info-wrap.is-open .nfs-info-box{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: auto;
}

/* arrow */
#nfs-upload-gate .nfs-info-box::after{
  content:"";
  position:absolute;
  right: 12px;
  bottom: -8px;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  background: rgb(43, 36, 36);
  border-right: 1px solid rgba(255,255,255,0.14);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}

/* ✅ Anchor to the whole Step 1 interface */
#nfs-upload-gate{
  position: relative;
}

/* ✅ Remove the inner-card anchor (this is what was trapping it) */
#nfs-upload-gate .nfs-upload-card{
  position: static !important;
}

/* ✅ Now bottom-right is truly the Step 1 container */
#nfs-upload-gate .nfs-info-wrap{
  position: absolute;
  right: 50px;
  bottom: 18px;
  z-index: 999;
}

/* Base (mobile first) */
#nfs-upload-gate .nfs-info-wrap{
  right: 14px;
  bottom: -4px;
}

/* Desktop override */
@media (min-width: 769px){
  #nfs-upload-gate .nfs-info-wrap{
    right: 40px;
    bottom: 12px;
  }
}

/* REMOVE dashed ring from the INFO button only */
#nfs-upload-gate .nfs-info-btn::before,
#nfs-upload-gate .nfs-info-btn::after{
  content: none !important;
  display: none !important;
}

/* Desktop only: show tooltip on hover */
@media (hover: hover) and (pointer: fine) {
  #nfs-upload-gate .nfs-info-wrap:hover .nfs-info-box {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 160ms ease, transform 160ms ease;
  }
}

/* ===============================
   STEP 2 – INFO TOOLTIP (TOP RIGHT)
   (scoped so it won't touch Step 1)
   =============================== */

#nfs-editor .nfs-info-wrap--step2{
  position: absolute;
  top:28px !important;
  right: 12px !important;
  z-index: 999;
}

/* Bubble opens downward (since icon is at the top) */
#nfs-editor .nfs-info-wrap--step2 .nfs-info-box{
  right: 0;
  bottom: auto;
  top: 46px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
  pointer-events: none;
}

#nfs-editor .nfs-info-wrap--step2.is-open .nfs-info-box{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: auto;
}

/* Arrow points up to the icon */
#nfs-editor .nfs-info-wrap--step2 .nfs-info-box::after{
  content:"";
  position: absolute;
  right: 12px;
  top: -8px;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  background: rgb(43, 36, 36);
  border-left: 1px solid rgba(255,255,255,0.14);
  border-top: 1px solid rgba(255,255,255,0.14);
}



#nfs-editor .nfs-info-wrap--step2 .nfs-info-box{
  text-align: center;
}



/* ===============================
   MOBILE: Prevent textarea zoom
   =============================== */
@media (max-width: 768px) {
  .nfs-textarea {
    font-size: 16px !important;
  }
}


.nfs-mode-toggle .nfs-label{
  text-align: center;
  width: 100%;
}


.nfs-tool-group .nfs-label{
  text-align: center;
  width: 100%;
  
}

.nfs-description-hint{
  text-align: center;
  width: 100%;
}



/* Make the toggle row behave like ONE pill that clips everything inside */
#neon-frame-product-section .nfs-mode-toggle-buttons{
  display:flex;
  gap: 0 !important;              /* no seam gap */
  padding: 3px;                   /* spacing comes from padding instead of gap */
  border-radius: 999px;
  overflow: hidden;               /* <-- key: clips any edge bleed */
  background: rgba(0,0,0,0.35);   /* the “track” behind buttons */
}

/* Each button fills half */
#neon-frame-product-section .nfs-mode-btn{
  flex: 1;
  border-radius: 999px;
  background-clip: padding-box;   /* helps Safari edges */
  -webkit-transform: translateZ(0); /* reduces iOS hairlines */
}

/* Optional: add a subtle divider line instead of a visible seam */
#neon-frame-product-section .nfs-mode-btn + .nfs-mode-btn{
  margin-left: 3px;               /* replaces gap, but inside the clipped wrapper */
}


/* Rainbow swatch – seam-proof */
.nfs-swatch--rainbow{
  position: relative;
  border-radius: 999px;
  overflow: hidden;
  background: #111; /* outer mask */
}

/* Inner gradient */
.nfs-swatch--rainbow::before{
  content: "";
  position: absolute;
  inset: 2px; /* KEY: prevents edge bleed */
  border-radius: 999px;
  background: conic-gradient(
    red, orange, yellow, green, cyan, blue, violet, red
  );
}

/* ===============================
   RAINBOW SWATCH – FIX "STITCHING"
   (iOS + desktop)
   =============================== */

#neon-frame-product-section .nfs-swatch--rainbow{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #111 !important; /* fallback */
  transform: translateZ(0);     /* helps iOS render clean */
}

/* Draw the rainbow on a layer we can oversize */
#neon-frame-product-section .nfs-swatch--rainbow::before{
  content: "";
  position: absolute;
  inset: -3px; /* oversize to cover any edge seam */
  border-radius: 999px;
  background: conic-gradient(
    from 90deg,
    red, orange, yellow, lime, cyan, blue, violet, red
  );

  /* Force a clean circular edge */
  -webkit-mask-image: radial-gradient(circle at center, #000 99%, transparent 100%);
  mask-image: radial-gradient(circle at center, #000 99%, transparent 100%);

  transform: scale(1.08);
  transform-origin: center;
}

/* Keep the color input clickable on top */
#neon-frame-product-section .nfs-swatch--rainbow input[type="color"]{
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}


/* ===============================
   MOBILE ONLY – SMALLER COLOR SWATCHES
   =============================== */
@media (max-width: 768px){

  /* All colour swatches */
  #neon-frame-product-section .nfs-swatch,
  #neon-frame-product-section .nfs-swatch--rainbow{
    width: 26px;
    height: 26px;
    border-width: 1.5px;
  }

  /* Color picker (rainbow input) */
  #neon-frame-product-section #nfs-brush-color{
    width: 28px;
    height: 28px;
  }

  /* Tighten spacing between swatches */
  #neon-frame-product-section .nfs-swatch-row{
    gap: 0.44rem;
  }
}


.nfs-currency-note{
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  line-height: 1.2;
  opacity: .85;
  letter-spacing: .2px;
}



/* Default (desktop & tablet) */
.nfs-currency-note{
  font-size: 13px;
}

/* Phone only */
@media (max-width: 768px){
  .nfs-currency-note{
    font-size: 11px;
    line-height: 2;
    opacity: 0.8;
  }
}


@keyframes nfsPricePulse {
  0%   { transform: scale(1); filter: brightness(1); }
  25%  { transform: scale(1.10); filter: brightness(1.25); }
  55%  { transform: scale(0.99); filter: brightness(1.05); }
  100% { transform: scale(1); filter: brightness(1); }
}

.nfs-price-pill--pulse{
  animation: nfsPricePulse 520ms cubic-bezier(.2,.9,.2,1);
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.20),
    0 0 22px rgba(255,255,255,0.26),
    0 0 52px rgba(255,255,255,0.18);
}


/* 🔥 Controlled OOMPH pulse (strong, not chaotic) */
@keyframes nfsPriceOomph {
  0%   { transform: scale(1); }
  18%  { transform: scale(1.2); }   /* was 1.5 – this was the problem */
  38%  { transform: scale(0.98); }
  62%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}


@keyframes nfsGlowFlash {
  0%   { box-shadow: 0 0 0 rgba(255,255,255,0); filter: brightness(1); }
  25%  { box-shadow: 0 0 0 2px rgba(255,255,255,0.22), 0 0 22px rgba(255,255,255,0.30), 0 0 60px rgba(255,255,255,0.18); filter: brightness(1.25); }
  100% { box-shadow: 0 0 0 rgba(255,255,255,0); filter: brightness(1); }
}

/* shimmer sweep overlay */
.nfs-price-pill{
  position: relative;
  overflow: hidden; /* important for the shimmer */
}

.nfs-price-pill::after{
  content: "";
  position: absolute;
  top: -20%;
  left: -60%;
  width: 40%;
  height: 140%;
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0) 100%
  );
}

@keyframes nfsShimmerSweep{
  0%   { left: -120%; opacity: 0; }
  15%  { opacity: 0.35; }
  45%  { opacity: 0.22; }
  100% { left: 130%; opacity: 0; }
}

/* When JS adds this class, we go big */
.nfs-price-pill--pulse{
  animation: nfsPriceOomph 620ms cubic-bezier(.2,.9,.2,1),
             nfsGlowFlash 620ms ease-out;
}

/* Trigger shimmer during pulse */
.nfs-price-pill--pulse::after{
  animation: nfsShimmerSweep 1500ms ease-out;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .nfs-price-pill--pulse,
  .nfs-price-pill--pulse::after{
    animation: none !important;
  }
}


/* =========================================================
   STEP 1 -> STEP 2 TRANSITION (KEEP LAYOUT THE SAME)
   - Step 1 fades + moves away
   - Step 2 smoothly fades in (no snap)
   - Gap closes because Step 1 collapses only while fading
   ========================================================= */

/* -------------------------
   STEP 1: Upload gate
   ------------------------- */
#nfs-upload-gate{
  will-change: opacity, transform, filter, max-height;
  overflow: hidden;              /* allows height collapse cleanly */

           /* big enough to fit Step 1 normally */

  transition:
    opacity 520ms cubic-bezier(.22,1,.36,1),
    transform 520ms cubic-bezier(.22,1,.36,1),
    filter 520ms cubic-bezier(.22,1,.36,1),
    max-height 520ms cubic-bezier(.22,1,.36,1),
    margin 520ms cubic-bezier(.22,1,.36,1),
    padding 520ms cubic-bezier(.22,1,.36,1);
}

#nfs-upload-gate.nfs-upload-gate--fadeout{
  opacity: 0;
  transform: translateY(-10px) scale(0.99);
  filter: blur(1px);

  /* close the gap while fading */
  max-height: 0;
  margin: 0 !important;
  padding: 0 !important;

  pointer-events: none;
}

/* If Step 1 and Step 2 are adjacent siblings, this removes any extra margin gap */
#nfs-upload-gate.nfs-upload-gate--fadeout + #nfs-editor{
  margin-top: 0 !important;
}

/* -------------------------
   STEP 2: Editor
   ------------------------- */
#nfs-editor{
  will-change: opacity, transform, filter;

  transition:
    opacity 1600ms cubic-bezier(.16,1,.3,1),
    transform 1600ms cubic-bezier(.16,1,.3,1),
    filter 1600ms cubic-bezier(.16,1,.3,1);
}

/* Waiting state (keep this subtle) */
#nfs-editor.nfs-designer--disabled{
  opacity: 0.20;
  transform: translateY(0px) scale(1);

  /* keep this super light so it doesn't feel “blurred out” on landing */
  filter: blur(0.5px) saturate(0.98) brightness(0.99);

  pointer-events: none;
}

/* Active state (IMPORTANT: not "none" so it animates reliably) */
#nfs-editor:not(.nfs-designer--disabled){
  opacity: 1;
  transform: translateY(0px) scale(1);
  filter: blur(0px) saturate(1) brightness(1);

  /* tiny cinematic lead-in so Step 1 starts moving first */
  transition-delay: 220ms;
}



/* =========================================
   Upload button: REAL pulse (movement) without overriding transform
   Uses the `scale` property (composes with existing transforms)
   ========================================= */




/* If your upload is a label styled like a button, keep it inline-block */
#nfs-upload-gate label{
  display: inline-block;
}

@keyframes nfs-upload-pulse{
  0%{
    scale: 1;
    filter: brightness(1.02) saturate(1.08);
    box-shadow:
      0 0 0 rgba(0,0,0,0),
      0 0 0 rgba(140,200,255,0),
      0 0 0 rgba(184,43,255,0);
  }
  50%{
    scale: 1.055; /* 🔥 stronger movement */
    filter: brightness(1.18) saturate(1.45);
    box-shadow:
      0 18px 40px rgba(0,0,0,0.45),
      0 0 36px rgba(140,200,255,0.35),
      0 0 42px rgba(184,43,255,0.28);
  }
  100%{
    scale: 1;
    filter: brightness(1.02) saturate(1.08);
    box-shadow:
      0 0 0 rgba(0,0,0,0),
      0 0 0 rgba(140,200,255,0),
      0 0 0 rgba(184,43,255,0);
  }
}

.nfs-cart-reassurance{
  margin: 10px 0 14px;
  font-size: 14px;
  line-height: 1.2;
  opacity: 0.85;
  letter-spacing: 0.2px;
  color: white
}


.nfs-cart-reassurance{
  position: relative;
  margin: 14px 0 18px;
  padding: 11px 16px;

  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0.35px;

  color: rgba(255,255,255,0.97);

  border-radius: 12px;

  /* Brighter gradient highlight */
  background: linear-gradient(
    90deg,
    rgba(0, 47, 255, 0.36),
    rgba(123, 0, 245, 0.48)
  );

  border: 1px solid rgba(255,255,255,0.22);

  /* Soft glow */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 6px 18px rgba(120,245,255,0.22),
    0 6px 22px rgba(195,135,255,0.22);
}

/* Subtle premium hover lift */
@media (hover: hover){
  .nfs-cart-reassurance:hover{
    background: linear-gradient(
      90deg,
      rgba(120,245,255,0.30),
      rgba(195,135,255,0.30)
    );

    box-shadow:
      0 0 0 2px rgba(255,255,255,0.12),
      0 8px 26px rgba(120,245,255,0.32),
      0 8px 30px rgba(195,135,255,0.32);
  }
}

.nfs-trust-line {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  opacity: 0.75;
  letter-spacing: 0.3px;
  color:rgb(247, 69, 69);
}

/* Cart headline: "Almost there — Review Your Design" */
h1.h1.cart-template__title{
  /* mobile -> desktop scaling */
  font-size: clamp(22px, 2.6vw, 30px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.6px;
  margin-bottom: 35px; /* optional: less empty space */
}


/* ================================
   MOBILE: shrink payment icons row
   ================================ */
@media (max-width: 767px) {

  /* the whole payment area */
  .cart-template__payments {
    margin-top: 10px;
  }

  /* title "Pay Securely With:" */
  .cart-template__payments-title {
    font-size: 12px !important;
    opacity: 0.9;
    margin: 8px 0 6px !important;
  }

  /* the icon row layout */
  .cart-template__payments .payment-types__list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  /* each icon wrapper */
  .cart-template__payments .payment-types__item {
    width: 34px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* the actual icon (svg or img) */
  .cart-template__payments .payment-types__item svg,
  .cart-template__payments .payment-types__item img {
    width: 34px !important;
    height: 22px !important;
    max-width: 34px !important;
    max-height: 22px !important;
  }
}


/* Dim notes placeholder text (all devices) */
.cart-template textarea::placeholder {
  color: rgba(255, 255, 255, 0);
}

/* Extra subtle on mobile */
@media (max-width: 749px) {
  .cart-template textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
  }
}



/* CART HEADER — Product / Price / Quantity / Total */
.cart-items__head
  .cart-items__col--main,
.cart-items__head
  .cart-items__col--price,
.cart-items__head
  .cart-items__col--quantity,
.cart-items__head
  .cart-items__col--summary {
  font-size: 16px !important;
  font-weight: 650 !important;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.92) !important;
}

/* ===============================
   CART HEADER ALIGNMENT + WORD UNDERLINE (NO SHIFT)
================================= */

/* Product stays left */
.cart-items__head .cart-items__col--main{
  display: flex !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Price / Quantity / Total centered in their own columns */
.cart-items__head .cart-items__col--price,
.cart-items__head .cart-items__col--quantity,
.cart-items__head .cart-items__col--summary{
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Word-only underline (does NOT affect alignment) */
.cart-items__head .cart-items__col--main,
.cart-items__head .cart-items__col--price,
.cart-items__head .cart-items__col--quantity,
.cart-items__head .cart-items__col--summary{
  text-decoration-line: underline;
  text-decoration-color: #5e00ff;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}


/* ===============================
   CART PRODUCT THUMB — OUTLINE + GLOW
================================= */

img.cart-item__image {
  border-radius: 8px !important;
  border: 1.5px solid #5e00ff!important;
  box-shadow:
    0 0 0 1px #5e00ff,
    0 0 14px #5e00ff !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.cart-item__image-container,
.cart-item__image-wrapper,
.cart-item__media,
.cart-item__image-link {
  overflow: visible !important;
}


/* ===============================
   NFS — MOBILE + DESKTOP STYLING
   (Your original mobile block, fixed + desktop added)
================================= */

/* ===============================
   MOBILE: (<= 768px)
================================= */
@media (max-width: 768px){

  /* The label text */
  .nfs-tool-group.nfs-mode-toggle .nfs-label{
    font-size: 11px !important;
    line-height: 1.25;
    margin-bottom: 8px !important;
    opacity: 0.9;
  }

  .nfs-tool-group select{
    border: 1px solid rgba(255,255,255,0.65) !important;
    background-color: rgba(0,0,0,0.55) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  }

  .nfs-controls-card{
    border: 1px solid rgba(255,255,255,0.70) !important;
    border-radius: 16px;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.08),
      0 10px 30px rgba(0,0,0,0.35);
  }

  .nfs-checkout-card{
    border: 1px solid rgba(255,255,255,0.75) !important;
    border-radius: 18px;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.1),
      0 14px 40px rgba(0,0,0,0.45);
  }

  .nfs-canvas-column{
    border: 1.5px solid rgba(255,255,255,0.75) !important;
    border-radius: 18px;
    padding: 10px;
    background: rgba(0,0,0,0.35);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.08),
      0 14px 36px rgba(0,0,0,0.45);
  }

  .nfs-textarea{
    border: 1px solid rgba(255,255,255,0.65) !important;
    border-radius: 14px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
    padding: 12px 14px;
  }

  /* Dropdown arrow — ONLY your select tool-groups */
  .nfs-tool-group.nfs-tool-group--select{
    position: relative;
  
  }

  .nfs-tool-group.nfs-tool-group--select select{
    padding-right: 44px;
  }

  .nfs-tool-group.nfs-tool-group--select::after{
    content: "";
    position: absolute;
    right: 14px;
    top: calc(50% + 12px);
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    pointer-events: none;

    /* Modern chevron arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 9.5L12 15l5.5-5.5' fill='none' stroke='%23ffffffcc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;

    /* subtle glow + depth */
    filter:
      drop-shadow(0 0 3px rgba(255,255,255,0.35))
      drop-shadow(0 0 8px rgba(184,43,255,0.35));
  }

   .nfs-mode-toggle-buttons{
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 999px;

  /* optional polish */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 8px 22px rgba(0,0,0,0.35);
}

.nfs-canvas-btn{
  border: 1px solid rgba(255,255,255,0.55) !important;
  border-radius: 6px;

  background: rgba(15,15,25,0.75);
  color: #fff;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 6px 18px rgba(0,0,0,0.35);

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 120ms ease;
}



}

/* ===============================
   DESKTOP: (>= 769px)
================================= */
@media (min-width: 769px){

  /* The label text */
  .nfs-tool-group.nfs-mode-toggle .nfs-label{
    font-size: 13px !important;
    line-height: 1.35;
    margin-bottom: 10px !important;
    opacity: 0.95;
  }

  .nfs-tool-group select{
    border: 1.25px solid rgba(255,255,255,0.65) !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
      color-scheme: dark;

  }

  /* DESKTOP: force dark dropdown UI */
@media (hover: hover) and (pointer: fine){

  .nfs-tool-group select{
    color-scheme: dark; /* 🔑 tells browser this is a dark control */
    background-color: rgba(0,0,0,0.55) !important;
    color: #fff !important;
  }

  .nfs-tool-group select option,
  .nfs-tool-group select optgroup{
    background-color: #0b0f19 !important; /* deep black/blue */
    color: #ffffff !important;
  }

  /* Selected / hovered option */
  .nfs-tool-group select option:checked,
  .nfs-tool-group select option:hover{
    background-color: rgba(123, 0, 255, 0.45) !important;
    color: #ffffff !important;
  }
}




  .nfs-controls-card{
    border: 1.25px solid rgba(255,255,255,0.80) !important;
    border-radius: 18px;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.08),
      0 12px 36px rgba(0,0,0,0.40);
  }

  .nfs-checkout-card{
    border: 1.25px solid rgba(255,255,255,0.85) !important;
    border-radius: 20px;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.10),
      0 16px 48px rgba(0,0,0,0.50);
  }

  .nfs-canvas-column{
    border: 1.75px solid rgba(255,255,255,0.80) !important;
    border-radius: 20px;
    padding: 12px;
    background: rgba(0,0,0,0.32);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.10),
      0 16px 44px rgba(0,0,0,0.50);
  }

  .nfs-textarea{
    border: 1.25px solid rgba(255,255,255,0.72) !important;
    border-radius: 16px;
    background: rgba(0,0,0,0.50);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
    padding: 14px 16px;
  }
  
  .nfs-mode-toggle-buttons{
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 999px;

  /* optional polish */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 8px 22px rgba(0,0,0,0.35);
 }
}


/* Placeholder appearance */
.nfs-dd__value.is-placeholder{
  opacity: 0.6;
  font-weight: 650;
}




  /* ===============================
   iOS FIX: PREVENT ZOOM ON NOTES INPUT
================================= */
@media (max-width: 768px) {

  textarea,
  input,
  select {
    font-size: 16px !important;
  }

}






@keyframes nfsZoomHintIn{
  to{ opacity:1; transform: translateY(0); }
}


.nfs-finger{
  position:absolute;
  width: 18px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 0 0 2px rgba(168,85,247,0.25);
  top: 10px;
}

.nfs-finger--a{ left: 18px; animation: nfsPinchA 1.4s ease-in-out infinite; }
.nfs-finger--b{ right: 18px; animation: nfsPinchB 1.4s ease-in-out infinite; }

@keyframes nfsPinchA{
  0%,100%{ transform: translateX(0) scale(1); opacity:0.95; }
  50%{ transform: translateX(-10px) scale(0.98); opacity:1; }
}
@keyframes nfsPinchB{
  0%,100%{ transform: translateX(0) scale(1); opacity:0.95; }
  50%{ transform: translateX(10px) scale(0.98); opacity:1; }
}




#note-cart { border: 8px solid lime !important; }


/* Hide default Shopify page title on How It Works page only */
body.page-how-it-works h1.page-title,
body.page-how-it-works .page-title,
body.page-how-it-works header h1 {
  display: none !important;
}







@media (max-width: 2099px){
  .header-mobile__secondary-link{
    color: rgba(255,255,255,0.55) !important;
    font-size: 13px;
    font-weight: 400;
  }

  .header-mobile__secondary-link:hover{
    color: rgba(255,255,255,0.75) !important;
  }

  .header-mobile__secondary-divider{
    border-top: 1px solid rgba(255,255,255,0.12);
    margin: 12px 0 8px;
  }
}
@media (max-width: 2000px){
  .header-mobile__secondary-link{
    text-decoration: none !important;
  }

  .header-mobile__secondary-link:hover{
    text-decoration: none !important;
  }
}


@media (max-width: 2000px){

  /* Wrapper should not add extra spacing */
  .header-mobile__secondary-wrap{
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* Kill any gap coming from theme by controlling our OWN list */
  .header-mobile__secondary-list{
    margin: 10px 0 0 !important;
    padding: 10px 0 0 !important;
    list-style: none !important;
    border-top: 1px solid rgba(255,255,255,0.12) !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    row-gap: 0 !important;
  }

  /* Tighten items */
  .header-mobile__secondary-item{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Tight links + grey */
  .header-mobile__secondary-link{
    display: block !important;
    padding: 4px 0 !important;
    line-height: 1.8 !important;

    color: rgba(255,255,255,0.55) !important;
    text-decoration: none !important;
  }
}


@media (max-width: 1199px){
  .header-mobile__menu-header{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 10px 14px;
  }

  .header-mobile__menu-header-column--center{
    display: flex;
    justify-content: center;
  }

  .header__heading-logo{
    max-height: 36px;
    width: auto;
  }
}


@media (max-width: 1199px){
  .header-mobile__menu-header-column--center .header__heading-logo{
    max-height: 50px; /* was ~32–36 */
    width: auto;
  }
}


/* Mobile homepage logo size */
@media (max-width: 1199px){
  .header__logo img,
  .header__heading-logo{
    max-height: 65px;   /* increase this */
    width: auto;
  }
}





/* NFS: Mobile drawer tap flash (main + secondary) */
@media (max-width: 1199px){
  .header-mobile__menu a{
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
  }

  .header-mobile__menu a::after{
    content: "";
    position: absolute;
    left: -130%;
    top: 50%;
    transform: translateY(-50%);
    width: 140%;
    height: 1.7em;
    background: linear-gradient(
      90deg,
      rgba(169, 85, 247, 0) 0%,
      rgba(169, 85, 247, 0.35) 35%,
      rgba(169, 85, 247, 0.95) 50%,
      rgba(169, 85, 247, 0.35) 65%,
      rgba(169, 85, 247, 0) 100%
    );
    opacity: 0;
    pointer-events: none;
    
  }

  /* Triggered by JS */
  .header-mobile__menu a.nfs-tapflash::after{
    opacity: 1;
animation: nfsTapFlash 1.1s cubic-bezier(.22,.61,.36,1);
  }

  @keyframes nfsTapFlash{
    0%   { left: -130%; opacity: 0; }
    15%  { opacity: 1; }
    100% { left: 130%; opacity: 0; }
  }
}

@media (max-width: 1199px){
  .header-mobile__menu a.nfs-tapflash{
    transform: scale(1.03);
  }

  .header-mobile__menu a.nfs-tapflash{
    transition: transform 120ms ease-out;
  }
}


/* NFS: Footer tap flash (mobile) */
@media (max-width: 767px){
  a.footer-navigation-item__link{
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
  }

  a.footer-navigation-item__link::after{
    content: "";
    position: absolute;
    left: -130%;
    top: 50%;
    transform: translateY(-50%);
    width: 140%;
    height: 1.7em;
    background: linear-gradient(
      90deg,
      rgba(169, 85, 247, 0) 0%,
      rgba(169, 85, 247, 0.35) 35%,
      rgba(169, 85, 247, 0.95) 50%,
      rgba(169, 85, 247, 0.35) 65%,
      rgba(169, 85, 247, 0) 100%
    );
    opacity: 0;
    pointer-events: none;
  }

  a.footer-navigation-item__link.nfs-tapflash::after{
    opacity: 1;
    animation: nfsTapFlash 1.1s cubic-bezier(.22,.61,.36,1);
  }

  a.footer-navigation-item__link.nfs-tapflash{
    transform: scale(1.03);
    transition: transform 600ms ease-out;
  }
}




/* =========================================
   MOBILE MENU BACKGROUND = HOMEPAGE STYLE
   Black base + purple backlight (bottom glow)
   Purple: rgba(87, 50, 152, 1)
   ========================================= */

@media (max-width: 1199px) {
  /* Target common drawer containers (keeps it contained = no bleed) */
  .menu-drawer,
  .menu-drawer__inner-container,
  .drawer,
  .drawer__inner,
  .header-mobile__menu,
  .header-mobile__drawer,
  .mobile-nav {
    position: relative;
    overflow: hidden;
    background: #000 !important; /* hard black base */
  }

  /* Depth layer (very subtle) */
  .menu-drawer::before,
  .menu-drawer__inner-container::before,
  .drawer::before,
  .drawer__inner::before,
  .header-mobile__menu::before,
  .header-mobile__drawer::before,
  .mobile-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    /* keeps it black but gives that slight depth */
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0.98) 0%,
      rgba(0,0,0,0.98) 65%,
      rgba(0,0,0,0.92) 100%
    );
  }

  /* Purple backlight glow layer (ellipse at bottom) */
  .menu-drawer::after,
  .menu-drawer__inner-container::after,
  .drawer::after,
  .drawer__inner::after,
  .header-mobile__menu::after,
  .header-mobile__drawer::after,
  .mobile-nav::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -18%;              /* push it down so it blooms up */
    width: 140%;
    height: 70%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;

    /* the “backlight” */
    background: radial-gradient(
      ellipse at bottom,
      rgba(87, 50, 152, 0.55) 0%,
      rgba(87, 50, 152, 0.28) 35%,
      rgba(87, 50, 152, 0.12) 55%,
      rgba(87, 50, 152, 0.00) 75%
    );

    filter: blur(6px);          /* softens it like your homepage */
  }

  /* Make sure menu content sits above both layers */
  .menu-drawer > *,
  .menu-drawer__inner-container > *,
  .drawer > *,
  .drawer__inner > *,
  .header-mobile__menu > *,
  .header-mobile__drawer > *,
  .mobile-nav > * {
    position: relative;
    z-index: 1;
  }
}




/* =========================================================
   NFS MOBILE DRAWER — match your screenshot exactly
   Black base + purple backlight + clean secondary menu
   Purple: rgba(87, 50, 152, 1)
   ========================================================= */

@media (max-width: 1199px){

  /* 1) Drawer background (hard black) */
  .menu-drawer,
  .menu-drawer__inner-container,
  .drawer,
  .drawer__inner,
  .header-mobile__drawer,
  .header-mobile__menu,
  .mobile-nav{
    position: relative !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  /* Subtle depth layer */
  .menu-drawer::before,
  .drawer::before,
  .header-mobile__drawer::before,
  .mobile-nav::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    pointer-events:none !important;
    z-index:0 !important;
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0.98) 0%,
      rgba(0,0,0,0.98) 70%,
      rgba(0,0,0,0.92) 100%
    ) !important;
  }

  /* Purple backlight glow */
  .menu-drawer::after,
  .drawer::after,
  .header-mobile__drawer::after,
  .mobile-nav::after{
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    bottom:-18% !important;
    width:140% !important;
    height:70% !important;
    transform:translateX(-50%) !important;
    pointer-events:none !important;
    z-index:0 !important;

    background: radial-gradient(
      ellipse at bottom,
      rgba(87, 50, 152, 0.55) 0%,
      rgba(87, 50, 152, 0.28) 35%,
      rgba(87, 50, 152, 0.12) 55%,
      rgba(87, 50, 152, 0.00) 75%
    ) !important;

    filter: blur(6px) !important;
  }

  /* Ensure content sits above glow layers */
  .menu-drawer > *,
  .menu-drawer__inner-container > *,
  .drawer > *,
  .drawer__inner > *,
  .header-mobile__drawer > *,
  .header-mobile__menu > *,
  .mobile-nav > *{
    position: relative !important;
    z-index: 1 !important;
  }

  /* 2) Kill "red/visited/underlined" links everywhere in drawer */
  .menu-drawer a,
  .drawer a,
  .header-mobile__drawer a,
  .mobile-nav a{
    color: rgba(255,255,255,0.92) !important;
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
  }

  .menu-drawer a:visited,
  .drawer a:visited,
  .header-mobile__drawer a:visited,
  .mobile-nav a:visited{
    color: rgba(255,255,255,0.92) !important;
  }

  /* 3) Top menu (big items) */
  .menu-drawer .list-menu__item,
  .menu-drawer__menu a,
  .drawer .list-menu__item{
    font-weight: 800 !important;
    letter-spacing: -0.2px !important;
  }

  /* 4) Secondary menu (smaller list under divider) */
  .header-mobile__secondary-item a,
  .header-mobile__secondary-link,
  .menu-drawer .header-mobile__secondary-link{
    display: block !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    opacity: 0.92 !important;
    padding: 8px 0 !important;
    text-decoration: none !important;
  }

  /* Divider above secondary menu like your screenshot */
  .header-mobile__secondary,
  .header-mobile__secondary-menu,
  .menu-drawer__utility-links{
    margin-top: 18px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255,255,255,0.10) !important;
  }

  /* 5) Search pill to match look */
  .menu-drawer input[type="search"],
  .menu-drawer .search__input,
  .drawer input[type="search"]{
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    color: rgba(255,255,255,0.92) !important;
    border-radius: 999px !important;
  }

  .menu-drawer input[type="search"]::placeholder,
  .menu-drawer .search__input::placeholder,
  .drawer input[type="search"]::placeholder{
    color: rgba(255,255,255,0.50) !important;
  }
}



/* =========================================
   ABOUT PAGE — "What We Stand For" tiles
   Make them EVEN + CENTERED on DESKTOP
   ========================================= */

@media (min-width: 821px){

  /* Center the whole group + stop full-width stretching */
  .nfs-about .card.wide .values{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 18px !important;

    max-width: 760px !important;     /* <- controls group width */
    width: 100% !important;
    margin: 14px auto 0 !important;  /* <- centers it */

    justify-content: center !important;
    align-items: stretch !important;
  }

  /* Force each tile to be the same “shape” */
  .nfs-about .card.wide .value{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    min-height: 54px !important;     /* <- makes rows even */
    padding: 14px 16px !important;   /* <- consistent internal spacing */
    width: 100% !important;
    border-radius: 16px !important;
  }

  /* If your checkmark is inline text, give it consistent spacing */
  .nfs-about .card.wide .value::before{
    content: "✓" !important;
    margin-right: 10px !important;
    color: rgba(255,255,255,0.9) !important;
    flex: 0 0 auto !important;
  }
}




/* NFS — Thin, subtle focus for cart notes */
#note-cart,
#note-cart:focus,
#note-cart:focus-visible {
  outline: 1px !important;
  box-shadow: none !important;
  border:1px solid rgb(148, 70, 231) !important; /* normal state */

}

/* Thin purple focus */
#note-cart:focus,
#note-cart:focus-visible {
  border: 3px solid rgba(255, 255, 255, 0.65) !important;
}

/* Kill thick wrapper ring */
.textarea-wrapper:focus-within,
.textarea-wrapper:focus-within * {
  outline: none !important;
  box-shadow: none !important;

}



/* =========================
   NFS Cart Notes Collapsible
   ========================= */
.nfs-cart-notes{
  margin-top: 18px;
  	border: 1px solid rgba(154,108,255,.45);
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}

.nfs-cart-notes summary{
  list-style: none;
}

.nfs-cart-notes summary::-webkit-details-marker{
  display: none;
}

.nfs-cart-notes__summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  user-select: none;
}

@media (min-width: 315px) and (max-width: 360px) {
  .nfs-cart-notes__summary {
    font-size: 10px;
  }
}

.nfs-cart-notes__icon{
  font-size: 22px;
  line-height: 1;
  transition: transform .2s ease;
}

.nfs-cart-notes[open] .nfs-cart-notes__icon{
  transform: rotate(180deg);
}

.nfs-cart-notes__content{
  padding: 0 18px 18px;
}

.nfs-cart-notes #note-cart{
  min-height: 120px;
  width: 100%;
  resize: vertical;
  background: transparent;
  color: #fff;
  	border: 1px solid rgba(154,108,255,.45); !important;
  border-radius: 14px;
  padding: 18px;
  box-shadow: none !important;
  outline: none !important;
}

/* focus */
.nfs-cart-notes #note-cart:focus,
.nfs-cart-notes #note-cart:focus-visible{
  border: 2px solid rgba(255,255,255,0.7) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* kill wrapper ring */
.nfs-cart-notes .textarea-wrapper:focus-within,
.nfs-cart-notes .textarea-wrapper:focus-within *{
  outline: none !important;
  box-shadow: none !important;
}





/* =========================================
   NFS Gift Cards — FORCE flick animation (desktop fix)
   Put this LAST in your CSS
========================================= */

.nfs-gc .nfs-gc__imgbox{
  overflow: hidden !important;
  position: relative !important;
}

.nfs-gc .nfs-gc__img{
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* Force animations to apply even if theme has animation: none; */
.nfs-gc .nfs-gc__img.nfs-out-left  { animation: nfsOutLeft 0.16s ease both !important; }
.nfs-gc .nfs-gc__img.nfs-out-right { animation: nfsOutRight 0.16s ease both !important; }
.nfs-gc .nfs-gc__img.nfs-in-left   { animation: nfsInLeft 0.22s ease both !important; }
.nfs-gc .nfs-gc__img.nfs-in-right  { animation: nfsInRight 0.22s ease both !important; }

/* Keyframes (keep here so nothing can “missing-keyframe” you) */
@keyframes nfsOutLeft  { from{transform:translateX(0) scale(1);opacity:1} to{transform:translateX(-26px) scale(.985);opacity:0} }
@keyframes nfsOutRight { from{transform:translateX(0) scale(1);opacity:1} to{transform:translateX( 26px) scale(.985);opacity:0} }
@keyframes nfsInLeft   { from{transform:translateX( 26px) scale(.985);opacity:0} to{transform:translateX(0) scale(1);opacity:1} }
@keyframes nfsInRight  { from{transform:translateX(-26px) scale(.985);opacity:0} to{transform:translateX(0) scale(1);opacity:1} }







/* NFS Gift Cards — remove top/bottom dead space (PHONE ONLY) */
@media (max-width: 600px){
  /* This is the actual height hog */
  .nfs-gc .nfs-gc__card--preview .nfs-gc__imgbox{
    aspect-ratio: 16 / 11 !important;  /* shorter than square */
  }

  /* Optional: slightly enlarge the image so it fills better */
  .nfs-gc .nfs-gc__card--preview .nfs-gc__img{
    padding: 5% 8% !important; /* less vertical padding */
  }
}


/* =========================================
   NFS Gift Cards – Center product image (PHONE ONLY)
========================================= */
@media (max-width: 600px){

  /* Make the preview box a true centering container */
  .nfs-gc .nfs-gc__card--preview .nfs-gc__imgbox{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Remove any leftover offset from the image */
  .nfs-gc .nfs-gc__card--preview .nfs-gc__img{
    margin: 0 !important;
    transform: translateY(0) !important;
  }
}

/* =========================================
   NFS Gift Cards – Enlarge product image (PHONE ONLY)
========================================= */
@media (max-width: 600px){

  .nfs-gc .nfs-gc__card--preview .nfs-gc__img{
    width: 92% !important;
    height: auto !important;
    max-width: none !important;
  }
}



/* =========================================
   NFS Gift Cards – PILLS STYLING (PHONE ONLY)
========================================= */


/* Pills: inside stage, at top, between stage + image panel */
.nfs-gc__stage{
  position: relative;
}

/* Create “gap” above the image panel so pills don’t overlap it */
.nfs-gc__imgbox{
  margin-top: 56px; /* adjust 48–64px to taste */
}

.nfs-gc__pills{
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  pointer-events: none; /* swipe + arrows still work */
}

.nfs-gc__pill{
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
  color: rgba(255,255,255,0.96);
  background: linear-gradient(135deg, rgba(87,50,152,0.42), rgba(87,50,152,0.22));
  border: 1px solid rgba(87,50,152,0.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 10px 26px rgba(0,0,0,0.38);
}

/* Small phones: stack */
@media (max-width: 420px){
  .nfs-gc__imgbox{ margin-top: 92px; }
  .nfs-gc__pills{ flex-direction: column; gap: 8px; }
}



/* NFS — mobile spacing between Add to Cart panel and accordions */
@media (max-width: 768px) {
  .nfs-gc__card--buy {
    margin-bottom: 50px;
  }
}




/* Center Gift Card Questions title */
.nfs-gc__panel-title{
  text-align: center !important;
}

/* Center underline as well */
.nfs-gc__panel-title::after{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* If you kept the desktop divider line, center it too */
@media (min-width: 900px){
  .nfs-gc__panel-title::before{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 72px) !important;
  }
}

.nfs-label.nfs-label--mode{
  font-size: 11.5px !important;
  margin-bottom: 10px; 

  }

  .nfs-label--description{
  margin-top: 8px;
  
}



@media (max-width: 899px){
  .nfs-mode-toggle{
    margin-bottom: 16px;
  }
}





/* =========================================================
   NFS CUSTOM DROPDOWN — GLITCH-FREE (FULL REPLACEMENT)
   Paste this whole block (replace your current dropdown CSS)

   Goals:
   - No "jump" (remove double translate on open/close)
   - Smooth close on iPhone (no heavy shadow animation)
   - Clean, readable panel (solid black, white rim, subtle neon)
   - Keeps your look, fixes the jank

   Uses your JS classes:
   - .nfs-dd.is-open
   - .nfs-dd.is-closing
   - .nfs-dd__btn.is-tapping
   - .nfs-dd__item.is-selected / .is-just-selected / .is-disabled
   ========================================================= */


/* Hide the native select (keeps form submission working) */
.nfs-native-select{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}


/* =========================
   Root
   ========================= */
.nfs-dd{
  position:relative;
  /* keep perspective on desktop only (phone jank fix below) */
  perspective:900px;
  z-index:20;
}


/* =========================
   Button
   ========================= */
.nfs-dd__btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:12px 14px;
  border-radius:40px;
  border:1.25px solid rgba(255,255,255,0.75);
  background:rgba(0,0,0,0.55);
  color:#fff;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 10px 26px rgba(0,0,0,0.32);

  cursor:pointer;
  -webkit-tap-highlight-color:transparent;

  /* iOS: keep it on compositor */
  transform: translateZ(0);
  will-change: transform, filter;

  /* IMPORTANT: don’t animate box-shadow heavily on phone; keep it stable */
  transition: transform 140ms ease, border-color 180ms ease, filter 160ms ease;
}

/* Desktop press (still ok) */
.nfs-dd__btn:active{
  transform: translateY(1px) scale(0.99);
}

/* Class-based tap animation (your JS adds .is-tapping) */
.nfs-dd__btn.is-tapping{
  transform: translateY(2px) scale(0.985);
  filter: brightness(1.06);
}

.nfs-dd__btn:focus{
  outline:none;
  border-color:rgba(255,255,255,0.95);
  box-shadow:
    0 0 0 2px rgba(184,43,255,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 14px 40px rgba(0,0,0,0.42);
}

.nfs-dd__value{
  font-weight:700;
  
}

.nfs-dd__value.is-placeholder{
  opacity:0.72;
  font-weight:650;
}


/* =========================
   Chevron pill
   ========================= */
.nfs-dd__chev{
  width:18px;
  height:18px;
  border-radius:999px;
  flex:0 0 auto;

  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  position:relative;

  transition: transform 200ms cubic-bezier(.2,.9,.2,1), background 200ms ease, border-color 200ms ease;
}

.nfs-dd__chev::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:10px;
  height:10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 9l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  opacity:0.9;
}


/* =========================
   Panel (THE IMPORTANT PART)
   - No double translateY
   - Only animates opacity + transform
   - Shadow stays consistent (and is reduced during close)
   ========================= */
.nfs-dd__panel{
  position:absolute;
  left:0;
  right:0;

  /* This is your spacing – keep it here only */
  top:calc(100% + 10px);

  z-index:999999;

  border-radius:18px;
  overflow:hidden;

  /* Solid readable base (single background, no overwrite) */
  background:#0b0b10;

  /* White border + glow */
  border:2px solid rgba(235,226,226,0.95);

  /* Keep shadow stable (don’t animate it) */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.90),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 18px rgba(255,255,255,0.32),
    0 0 24px rgba(184,43,255,0.20),
    0 24px 70px rgba(0,0,0,0.78);

  opacity:0;
  pointer-events:none;

  /* CLOSED STATE: slight lift */
  transform: translate3d(0,-6px,0) scale(0.985) rotateX(-4deg);
  transform-origin: top center;

  will-change: transform, opacity;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;

  /* Only cheap transitions */
  transition: opacity 160ms ease, transform 190ms cubic-bezier(.18,.95,.18,1);
}

/* OPEN: translate to 0 (NO extra 10px – fixes “jump”) */
.nfs-dd.is-open .nfs-dd__panel{
  opacity:1;
  pointer-events:auto;
  transform: translate3d(0,0,0) scale(1) rotateX(0deg);
}

/* During closing: remove heavy glow so it closes buttery on iPhone */
.nfs-dd.is-closing .nfs-dd__panel{
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.85),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 14px 40px rgba(0,0,0,0.72);
}


/* =========================
   Open state button styling
   (keep “open” feel without moving it around)
   ========================= */
.nfs-dd.is-open .nfs-dd__btn{
  border-color: rgba(255,255,255,0.95);
  box-shadow:
    0 0 0 2px rgba(184,43,255,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 14px 44px rgba(0,0,0,0.50);
  transform: translateZ(0);
}

.nfs-dd.is-open .nfs-dd__chev{
  transform: rotate(180deg);
  background: rgba(184,43,255,0.18);
  border-color: rgba(255,255,255,0.28);
}


/* =========================
   Items
   ========================= */
.nfs-dd__opt,
.nfs-dd__item{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:12px 14px;
  border:0;
  background:transparent;
  color:rgba(255,255,255,0.92);

  font-weight:700;
  text-align:left;
  cursor:pointer;

  /* keep hover/selection cheap */
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

/* Separator lines */
.nfs-dd__opt,
.nfs-dd__item{
  border-top: 1px solid rgba(255,255,255,0.06);
}
.nfs-dd__opt:first-child,
.nfs-dd__item:first-child{
  border-top: 0;
}

.nfs-dd__opt:hover,
.nfs-dd__item:hover{
  background:rgba(30, 43, 223, 0.26);
  color:#fff;
}

.nfs-dd__opt.is-selected,
.nfs-dd__item.is-selected{
  background:rgba(135, 0, 245, 0.42);
  color:#fff;
}

/* Disabled */
.nfs-dd__item.is-disabled,
.nfs-dd__item:disabled{
  opacity:0.45;
  cursor:not-allowed;
}

/* “Just selected” pop */
@keyframes nfsDdSelect{
  0%   { transform: scale(0.99); }
  60%  { transform: scale(1.012); }
  100% { transform: scale(1); }
}
.nfs-dd__item.is-just-selected,
.nfs-dd__opt.is-just-selected{
  animation: nfsDdSelect 180ms ease-out;
}


/* Tick (only if your old markup uses it) */
.nfs-dd__tick{
  width:18px;
  height:18px;
  border-radius:999px;
  display:grid;
  place-items:center;

  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);

  opacity:0;
  transform:scale(0.9);
  transition:opacity 140ms ease, transform 140ms ease;
}
.nfs-dd__opt.is-selected .nfs-dd__tick{
  opacity:1;
  transform:scale(1);
}
.nfs-dd__tick::before{
  content:"";
  width:10px;
  height:10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}


/* Missing variant state */
.nfs-dd.nfs-variant-missing .nfs-dd__btn{
  outline: 2px solid rgba(255, 0, 0, 0.95) !important;
  outline-offset: 3px;
  border-radius: 14px;
  animation: nfsShake .45s ease;
}


/* =========================
   Layout safety: allow panel to escape
   (NO transform nuking — that caused glitches)
   ========================= */
#neon-frame-app,
#neon-frame-product-section,
.nfs-controls,
.nfs-frame-inner,
.nfs-frame-outer{
  overflow: visible !important;
}

/* Open state sits above everything */
.nfs-dd.is-open{
  z-index: 999999 !important;
}


/* =========================
   Mobile tuning
   ========================= */
@media (max-width: 768px){
  /* Biggest win: kill 3D on phone */
  .nfs-dd{ perspective:none; }

  .nfs-dd__btn{ padding:11px 13px; }
  .nfs-dd__opt,
  .nfs-dd__item{ padding:11px 13px; }

  /* reduce shadow blur slightly for iPhone smoothness */
  .nfs-dd__panel{
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.90),
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 0 14px rgba(255,255,255,0.30),
      0 0 18px rgba(184,43,255,0.18),
      0 18px 56px rgba(0,0,0,0.76);
    transform: translate3d(0,-5px,0) scale(0.99);
  }

  .nfs-dd.is-open .nfs-dd__panel{
    transform: translate3d(0,0,0) scale(1);
  }

  /* iOS: don’t fight :active + class tap */
  .nfs-dd__btn:active{
    animation:none !important;
  }
}



/* =========================================================
   NFS — Pinch Hint (TINY / FLAT / PHONE ONLY)
   ========================================================= */

/* Hard kill everywhere by default */
.nfs-canvas-pinch-hint{
  display: none !important;
}

/* Enable ONLY on phones */
@media (max-width: 767px){
  .nfs-canvas-pinch-hint{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 2px;

    width: fit-content;
    max-width: 92%;
    margin-top: 6px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px !important;
    padding: 3px 8px;   /* ⬅ much flatter */
    border-radius: 999px;

    background: rgba(0,0,0,0.85); /* flat, no glass */
    border: 1px solid rgba(255,255,255,0.45);

    color: #fff;
    font-size: 0.72rem; /* ⬅ smaller text */
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;

    pointer-events: none;
    user-select: none;

    opacity: 0;
    animation: nfsHintFadeIn 0.35s ease-out 0.25s forwards;
  }

  .nfs-pinch-icon{
    font-size: 0.85rem; /* ⬅ smaller icon */
    line-height: 1;
    opacity: 0.9;
  }

  .nfs-pinch-text{
    opacity: 0.9;
  }

  @keyframes nfsHintFadeIn{
    to{ opacity: 1; }
  }
}

@media (max-width: 767px){
  .nfs-canvas-pinch-hint{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* --- Make sure glow can't be clipped --- */
#neon-frame-product-section .nfs-swatch-row,
#neon-frame-product-section .nfs-swatch-row *{
  overflow: visible !important;
}

/* --- Force active style to win + sit above neighbours --- */
#neon-frame-product-section .nfs-swatch.nfs-swatch--active,
#neon-frame-product-section .nfs-swatch.nfs-swatch--active:hover,
#neon-frame-product-section .nfs-swatch.nfs-swatch--active:active,
#neon-frame-product-section .nfs-swatch[aria-pressed="true"]{
  border-color: #fff !important;
  transform: scale(1.04) !important;

  position: relative !important;
  z-index: 5 !important;

  box-shadow:
    0 0 0 3px #000,
    0 0 0 4px rgba(255,255,255,0.65),
    0 0 22px rgba(255,255,255,0.65) !important;
}





/* =========================================================
   NFS — Assisted Drawing Toggle
   STYLE: Neon Mode Badge (Premium / Minimal)
   ========================================================= */

/* Container under canvas */
.nfs-canvas-tools{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top: 10px;
  padding: 0;
}

/* Badge base */
.nfs-assisted-toggle{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 6px 12px;
  border-radius: 10px; /* ← key difference: NOT a pill */

  background: linear-gradient(
    180deg,
    rgba(18,18,22,0.96),
    rgba(10,10,14,0.96)
  );

  border: 1px solid rgba(255,255,255,0.55);
  color: rgba(255,255,255,0.85);

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition:
    border-color 160ms ease,
    box-shadow 180ms ease,
    background 160ms ease,
    color 160ms ease;
}

/* Etched inset line (premium feel) */
.nfs-assisted-toggle::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius: 8px;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04);
}

/* OFF state */
.nfs-assisted-toggle[aria-pressed="false"]{
  opacity: 0.78;
  box-shadow: none;
}

/* ON state — neon edge + inner glow */
.nfs-assisted-toggle[aria-pressed="true"]{
  border-color: rgba(142, 40, 250, 0.85);
  background: linear-gradient(
    180deg,
    rgba(30,18,44,0.96),
    rgba(18,10,30,0.96)
  );

  box-shadow:
    0 0 0 1px rgba(185,120,255,0.18) inset,
    0 0 18px rgba(134, 35, 239, 0.85);
}

/* Text label */
.nfs-assisted-toggle__state{
  font-weight: 950;
  letter-spacing: .08em;
}

/* ON text */
.nfs-assisted-toggle[aria-pressed="true"] .nfs-assisted-toggle__state{
  color: rgb(255, 255, 255);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.98);
}

/* OFF text */
.nfs-assisted-toggle[aria-pressed="false"] .nfs-assisted-toggle__state{
  color: rgba(255,255,255,0.55);
}

/* Micro confirmation pulse (JS adds .is-confirm) */
.nfs-assisted-toggle.is-confirm{
  animation: nfsBadgeConfirm 220ms ease-out;
}

@keyframes nfsBadgeConfirm{
  0%{
    box-shadow:
      0 0 0 1px rgba(185,120,255,0.10) inset,
      0 0 0 rgba(185,120,255,0);
  }
  60%{
    box-shadow:
      0 0 0 1px rgba(185,120,255,0.22) inset,
      0 0 26px rgba(185,120,255,0.7);
  }
  100%{
    box-shadow:
      0 0 0 1px rgba(185,120,255,0.18) inset,
      0 0 18px rgba(185,120,255,0.45);
  }

  
}


/* Base state label */
.nfs-assisted-toggle__state{
  position: relative;
  font-weight: 900;
  letter-spacing: .14em;
}

/* Underline (hidden by default) */
.nfs-assisted-toggle__state::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-3px;

  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(190,120,255,1),
    rgba(90,255,230,0.9)
  );

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
  border-radius: 2px;
}

/* ON → underline appears */
.nfs-assisted-toggle[aria-pressed="true"] 
.nfs-assisted-toggle__state::after{
  transform: scaleX(1);
}




/* White outline around the visible info circle */
.nfs-info-wrap-2{
  border: 1.5px solid rgba(255,255,255,0.9);
  border-radius: 50%;
  box-sizing: border-box;
}


.nfs-info-wrap > button.nfs-info-btn{
  border: 1.5px solid rgba(255,255,255,0.9);
  border-radius: 50%;
  box-sizing: border-box;

  transition:
    box-shadow 180ms ease,
    transform 120ms ease,
    border-color 180ms ease;
}


.nfs-info-wrap > button.nfs-info-btn:hover{
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.15),
    0 0 12px rgba(180,90,255,0.45);
}

button.nfs-info-btn:active{
  transform: scale(0.96);
}



/* ✅ Keep wrapper clean (it's a tall anchor box, not the circle) */
.nfs-info-wrap{
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* ✅ Outline the actual circular button */
.nfs-info-wrap > button.nfs-info-btn{
  border: 1.5px solid rgba(255,255,255,0.92) !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
}

/* (optional) guarantee it stays a perfect circle */
.nfs-info-wrap > button.nfs-info-btn{
  width: 31px !important;
  height: 30px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
}

.nfs-info-box{
  border: 2px solid rgba(255,255,255,0.90) !important;

}



@media (max-width: 1199px){

  /* Tighten main mobile menu item spacing */
  ul.header-mobile__menu-list li{
    margin: 0 !important;
  }

  ul.header-mobile__menu-list li a,
  a.header-navigation-item{
    padding: 6px 0 !important;   /* 👈 THIS is the key control */
    line-height: 1.2 !important;  /* tighter vertical rhythm */
  }

}





/* =========================================
   STEP 1 + STEP 2 — WHITE OUTLINE
   Targets:
   - #nfs-upload-gate
   - #nfs-editor.nfs-designer
   ========================================= */

#nfs-upload-gate,
#nfs-editor.nfs-designer{
  position: relative;
  border: 3.5px solid rgba(0, 0, 0, 0.92) !important;
  border-radius: 38px !important;
  box-sizing: border-box;

  box-shadow: 0 0 0 1px rgba(153, 0, 255, 0.94) inset;
}


/* If something is sitting on top, this guarantees the outline is visible */
#nfs-upload-gate::after,
#nfs-editor.nfs-designer::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 26px;
  pointer-events:none;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.92);
}




/* =========================================
   STEP 2 — DESCRIPTION TEXTAREA
   Desktop default open size
   ========================================= */

/* Desktop only */
@media (min-width: 1024px){
  textarea#nfs-description.nfs-textarea{
    min-height: 160px;        /* default open height */
    height: 260px;
    max-height: 260px;        /* optional safety cap */

    resize: vertical;         /* allow user to expand */
    line-height: 1.45;
  }
}

/* Dim placeholder text */
#neon-frame-app textarea::placeholder{
  color: rgba(255,255,255,0.35); /* lower = dimmer */
  opacity: 0.7; /* required for Safari */
}








/* Make the canvas wrapper the positioning parent */
#nfs-canvas-wrapper{
  position: relative;
}




/* ================================
   SLIM "SAVED" TOAST (Reusable)
   For:
   - #nfs-save-indicator  (Design saved)
   - #nfs-save-indicator-2 (Details saved)
   ================================ */

#nfs-save-indicator,
#nfs-save-indicator-2{
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%) translateY(8px) scale(0.98);

  z-index: 50;
  pointer-events: none;

  opacity: 0;
  visibility: hidden;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 6px 12px 6px 10px;
  border-radius: 999px;

  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);

  border: 1px solid rgba(255,255,255,0.80);

  color: rgba(255,255,255,0.94);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;

  box-shadow:
    0 8px 22px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.07) inset,
    0 0 16px rgba(120, 255, 170, 0.16);

  transition:
    opacity 200ms ease,
    transform 220ms cubic-bezier(.2,.9,.2,1),
    visibility 0s linear 200ms;
}



/* First toast: green tick */
#nfs-save-indicator::before{
  content: "✓";
}

/* Second toast: exclamation mark */
#nfs-save-indicator-2::before{
  content: "!";
}

/* Shared bubble styling for both */
#nfs-save-indicator::before,
#nfs-save-indicator-2::before{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 15px;
  height: 15px;
  border-radius: 50%;

  background: rgba(60, 210, 120, 0.22);
  border: 1px solid rgba(90, 255, 160, 0.65);

  color: #7dffb6;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;

  box-shadow:
    0 0 10px rgba(90, 255, 160, 0.42),
    0 0 0 1px rgba(0,0,0,0.45) inset;
}

#nfs-save-indicator-2::before{
  content: "!";
  background: rgba(255, 200, 0, 0.22);
  border: 1px solid rgba(255, 220, 80, 0.8);
  color: #ffd84a;

  box-shadow:
    0 0 10px rgba(255, 220, 80, 0.55),
    0 0 0 1px rgba(0,0,0,0.45) inset;
}


/* Visible state */
#nfs-save-indicator.is-visible,
#nfs-save-indicator-2.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition:
    opacity 200ms ease,
    transform 240ms cubic-bezier(.2,.9,.2,1),
    visibility 0s;
}

@media (max-width: 768px){
  #nfs-save-indicator,
  #nfs-save-indicator-2{
    bottom: 12px;
    padding: 5px 10px 5px 9px;

    font-size: 9px;          /* slightly smaller */
    letter-spacing: 0.04em; /* tighter so it fits one line */
    white-space: nowrap;    /* keep single line */
  }

  #nfs-save-indicator::before,
  #nfs-save-indicator-2::before{
    width: 13px;
    height: 13px;
    font-size: 8px;
  }
}

@media (min-width: 769px){
  #nfs-save-indicator,
  #nfs-save-indicator-2{
    padding: 12px 24px;   /* wider & taller bubble */
    font-size: 13px;     /* bigger text */
    gap: 10px;           /* more space between tick and text */
  }

  #nfs-save-indicator::before,
  #nfs-save-indicator-2::before{
    width: 18px;         /* bigger tick circle */
    height: 18px;
    font-size: 12px;    /* bigger tick */
  }
}


@media (min-width: 769px){
  #nfs-save-indicator,
  #nfs-save-indicator-2{
    white-space: nowrap;   /* forces single line */
  }
}




@media (max-width: 768px){
  #nfs-canvas-wrapper{
    width: 100%;
  }
}




@media (max-width: 768px){
  /* the outer wrapper often has padding that makes everything feel narrow */
  #neon-frame-app{
    padding-left: 3px !important;
    padding-right: 3px !important;
  }

  /* make sure wrapper can actually use full width */
  #nfs-canvas-wrapper{
    width: 100% !important;
    max-width: none !important;
  }
}



@media (max-width: 768px){
  .nfs-canvas-column{
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

@media (max-width: 768px){
  #nfs-canvas{ touch-action: pan-y; }
}



/* ==========================================
   LIGHTS TOGGLE – remove glow when OFF
   Keep assisted style, glow only when ON
   ========================================== */

/* Force kill glow when OFF */
.nfs-lights-toggle[aria-pressed="false"]{
  box-shadow: none !important;
  filter: none !important;
  border-color: rgba(255,255,255,0.35) !important;
  color: rgba(255,255,255,0.65) !important;
}

/* Restore purple glow when ON */
.nfs-lights-toggle[aria-pressed="true"]{
  border-color: rgba(142, 40, 250, 0.85) !important;
  color: #fff !important;
  box-shadow:
    0 0 0 1px rgba(185,120,255,0.18) inset,
    0 0 18px rgba(134, 35, 239, 0.85) !important;
}


/* Base state label */
.nfs-lights-toggle__state{
  position: relative;
  font-weight: 900;
  letter-spacing: .14em;
}

/* Underline (hidden by default) */
.nfs-lights-toggle__state::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-3px;

  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(190,120,255,1),
    rgba(90,255,230,0.9)
  );

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
  border-radius: 2px;
}

/* ON → underline appears */
.nfs-lights-toggle[aria-pressed="true"] 
.nfs-lights-toggle__state::after{
  transform: scaleX(1);
}




/* ==========================================
   FORCE Lights OFF typography to match Assisted OFF
   ========================================== */

#neon-frame-product-section #nfs-lights-toggle{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* OFF state (match assisted: opacity + no glow) */
#neon-frame-product-section #nfs-lights-toggle[aria-pressed="false"]{
  opacity: 0.78;
  box-shadow: none !important;
}

/* State word (match assisted: always 950 + wider tracking) */
#neon-frame-product-section #nfs-lights-toggle .nfs-lights-toggle__state{
  font-weight: 950 !important;
  letter-spacing: .08em !important;
}

/* OFF state word (match assisted color) */
#neon-frame-product-section #nfs-lights-toggle[aria-pressed="false"] .nfs-lights-toggle__state{
  color: rgba(255,255,255,0.55) !important;
  text-shadow: none !important;
}

/* ON state word (match assisted glow) */
#neon-frame-product-section #nfs-lights-toggle[aria-pressed="true"] .nfs-lights-toggle__state{
  color: rgb(255,255,255) !important;
  text-shadow: 0 0 10px rgba(255,255,255,0.98) !important;
}


/* Lights label whiter (only the words "Light Switch:") */
#nfs-lights-toggle .nfs-lights-toggle__label{
  color: rgba(255,255,255,0.85) !important;
}


/* Neon Frame Studio – Cart link color */
.cart-item a.link {
  color:rgb(255, 0, 0) !important;
  -webkit-text-fill-color:rgb(254, 0, 0) !important;
}





/* ✅ Critical: allow grid children to shrink on small screens */
.nfs-main-layout > *{
  min-width: 0 !important;
}

/* ✅ Ensure columns don't exceed container width */
.nfs-canvas-column,
.nfs-controls-column{
  min-width: 0 !important;
  width: 100%;
  max-width: 100%;
}



@media (max-width: 480px){

  /* Make the header the positioning context */
  #nfs-editor .nfs-designer-header{
    position: relative;
    padding-right: 56px; /* space for the info icon */
  }

  /* Anchor the info icon to the header, not the whole editor */
  #nfs-editor .nfs-designer-header .nfs-info-wrap--step2{
    position: absolute;
    top: 0;
    right: 0;
  }

  /* Allow the mode label to wrap instead of overflowing */
  #neon-frame-product-section .nfs-mode-toggle .nfs-label{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    padding: 0 6px;
  }
}





/* =========================================================
   iPhone 12 / small screens: MODE LABEL wrap fix
   (targets .nfs-label--mode directly)
   ========================================================= */
@media (max-width: 480px){

  /* The actual element that needs wrapping */
  #neon-frame-product-section .nfs-label--mode{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

    white-space: normal !important;   /* overrides your global nowrap */
    overflow: visible !important;
    text-overflow: unset !important;

    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto;

    padding-right: 2px; /* tiny breathing room */
  }

}



/* ===============================
   SMALL PHONE: True visual centering for title + subtitle
   =============================== */
@media (max-width: 390px){

  .nfs-designer-header{
    position: relative;
    text-align: center;
  }

  .nfs-designer-header .nfs-heading,
  .nfs-designer-header .nfs-subheading{
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* Keep info icon absolutely positioned so it doesn't steal center */
  .nfs-designer-header .nfs-info-wrap--step2{
    position: absolute !important;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}


/* Small phones only */
@media (max-width: 469px){
  #nfs-editor .nfs-designer-header .nfs-heading,
  #nfs-editor .nfs-designer-header .nfs-subheading{
    position: relative !important;
    left: 25px !important;
  }
}

/* Mid phones / tablets */
@media (min-width: 470px) and (max-width: 768px){
  #nfs-editor .nfs-designer-header .nfs-heading,
  #nfs-editor .nfs-designer-header .nfs-subheading{
    position: static !important;
    left: auto !important;
  }
}


/* =========================================
   iPhone 12 — shrink editor title
   ========================================= */
@media (max-width: 390px){
  #nfs-editor .nfs-designer-header .nfs-heading{
    font-size: 14px !important;   /* try 17px–19px range */
    letter-spacing: 0.12em !important; /* tighten so it feels balanced */
  }

  #nfs-editor .nfs-designer-header .nfs-subheading{
    font-size: 10px !important; /* keep subtitle proportional */
  }
}







/* =========================================
   Step 1 — "OR" divider between buttons
   ========================================= */
#neon-frame-product-section .nfs-or-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin: 12px 0;
}

#neon-frame-product-section .nfs-or-line{
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(111,43,255,0),
    rgba(111,43,255,0.75),
    rgba(111,43,255,0)
  );
}

#neon-frame-product-section .nfs-or-text{
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.95);
  padding: 0 2px;
}






.nfs-demo-btn {

display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 2rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background-image: linear-gradient(90deg, #29e3ff, #b82bff);
  color: #000;
  font-weight: 600;
  font-size: 0.98rem;
  box-shadow: 0 0 28px rgba(184, 43, 255, 0.6);
  transition: box-shadow 150ms ease, transform 150ms ease;
  
}





/* =========================================================
   STEP 1 — Fixes
   1) Make BOTH buttons match styling
   2) Only bounce the WHITE dashed ring, NOT the button
   ========================================================= */

/* 1) Make the new button inherit ALL the same styling as the original */
#nfs-upload-gate .nfs-browse-btn,
#nfs-upload-gate .nfs-demo-btn{
  /* ensure both behave/size the same */
  width: 95%;
  max-width: 300px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* If you have a desktop sizing rule for .nfs-browse-btn, mirror it too */
@media (min-width: 769px){
  #nfs-upload-gate .nfs-browse-btn,
  #nfs-upload-gate .nfs-demo-btn{
    width: min(720px, 92%) !important;
    max-width: none !important;
  }
}

/* 2) STOP the button itself from bouncing (overrides any previous animation) */
#nfs-upload-gate .nfs-browse-btn,
#nfs-upload-gate .nfs-demo-btn{
  animation: none !important;
  transform: none !important;
}

/* Ensure both buttons have the same dashed ring (white outline) */
#nfs-upload-gate .nfs-browse-btn::after,
#nfs-upload-gate .nfs-demo-btn::after{
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  border: 2px dashed rgba(255,255,255,.65);
  box-shadow: 0 0 0 2px rgba(0,0,0,.25);
  opacity: .9;
  pointer-events: none;

  /* ✅ ONLY the ring bounces */
  animation: nfs-ring-bounce 1.7s ease-in-out infinite !important;
  transform-origin: center;
}

/* Keep the button positioned for the pseudo-element */
#nfs-upload-gate .nfs-browse-btn,
#nfs-upload-gate .nfs-demo-btn{
  position: relative;
}

/* Ring-only bounce (subtle) */
@keyframes nfs-ring-bounce{
  0%   { transform: scale(1);   opacity: .85; }
  50%  { transform: scale(1.07); opacity: 1; }
  100% { transform: scale(1);   opacity: .85; }
}



/* Extra spacing so OR never touches buttons on small phones */
#nfs-upload-gate .nfs-or-divider{
  margin: 16px 0 14px 0;   /* top & bottom space */
  line-height: 1;
}

@media (max-width: 768px){
  #nfs-upload-gate .nfs-or-divider{
    margin: 4px 0 18px 0; /* a bit more space on small screens */
  }
}


/* Step 1 — Demo hint styling */
#nfs-upload-gate .nfs-demo-hint{
  margin: 8px 0 10px;           /* space above & below */
  text-align: center;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Slight glow to match neon feel (very subtle) */
#nfs-upload-gate .nfs-demo-hint{
  text-shadow: 0 0 8px rgba(168,85,247,0.15);
}

/* Tighter on very small phones */
@media (max-width: 390px){
  #nfs-upload-gate .nfs-demo-hint{
    margin: 6px 0 12px;
    font-size: 11px;
  }
}


@media (max-width: 390px){
  #nfs-upload-gate .nfs-heading{
    font-size: 13px !important;   /* adjust if you want slightly bigger/smaller */
    line-height: 1.15 !important;
  }
}



#nfs-car-browser .nfsCB-accBtn > div:first-child{
  text-align: left;
  flex: 1 1 auto;
}


/* =========================================
   NFS Car Browser – Force WHITE outlines
   (Desktop + Mobile)
   ========================================= */

#nfs-car-browser .nfsCB-search,
#nfs-car-browser .nfsCB-col,
#nfs-car-browser .nfsCB-acc,
#nfs-car-browser .nfsCB-card,
#nfs-car-browser .nfsCB-panel {
  border-color: #ffffff !important;
}

/* Mobile accordion buttons */
#nfs-car-browser .nfsCB-accBtn{
  border-bottom: 1px solid rgba(255,255,255,0.6);
}

/* Lists (make/model panels) */
#nfs-car-browser .nfsCB-list{
  border-top: 1px solid rgba(255,255,255,0.4);
}

/* Photo cards inner stroke */
#nfs-car-browser .nfsCB-card{
  box-shadow: 0 0 0 1px rgba(255,255,255,0.85) inset;
}

/* Search bar glow */
#nfs-car-browser .nfsCB-search{
  box-shadow:
    0 0 0 1px #ffffff inset,
    0 0 12px rgba(255,255,255,0.25);
}

/* Desktop column headers */
#nfs-car-browser .nfsCB-colHead{
  border-bottom: 1px solid #ffffff;
}

/* Photo panel border stronger */
#nfs-car-browser .nfsCB-photos{
  outline: 1px solid #ffffff;
  outline-offset: -1px;
}



/* =========================================
   Enable internal scrolling for Make / Model
   dropdowns on DESKTOP
   ========================================= */

@media (min-width: 921px){
  #nfs-car-browser .nfsCB-list{
    max-height: 420px;        /* scroll area height */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #nfs-car-browser .nfsCB-col{
    display: flex;
    flex-direction: column;
  }

  #nfs-car-browser .nfsCB-colHead{
    flex: 0 0 auto;
  }

  #nfs-car-browser .nfsCB-list{
    flex: 1 1 auto;
  }
}



/* Step 1 return: slower, smoother, more “premium” */
@keyframes nfsStep1PopIn {
  0%   { opacity: 0; transform: translateY(22px); filter: blur(8px); }
  70%  { opacity: 1; transform: translateY(0);   filter: blur(0); }
  100% { opacity: 1; transform: translateY(0);   filter: blur(0); }
}

#nfs-upload-gate.nfs-step1-pop {
  animation: nfsStep1PopIn  1500ms cubic-bezier(.16,1,.3,1) both;
}



/* ================================
   NFS Gift Card – Force Purple Buttons (Bottom 3)
   ================================ */

.gift-card .nfs-gc__bottomBtns .nfs-gc__btn {
  background: linear-gradient(180deg, #6F2BFF 0%, #4E1FCC 100%) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  box-shadow: 
    0 10px 30px rgba(111,43,255,0.45),
    inset 0 1px 0 rgba(255,255,255,0.25);
}

.gift-card .nfs-gc__bottomBtns .nfs-gc__btn:hover {
  transform: translateY(-1px);
  box-shadow: 
    0 14px 40px rgba(111,43,255,0.6),
    inset 0 1px 0 rgba(255,255,255,0.3);
}

.gift-card .nfs-gc__bottomBtns .nfs-gc__btn:active {
  transform: translateY(0);
  box-shadow: 
    0 8px 20px rgba(111,43,255,0.4),
    inset 0 1px 0 rgba(255,255,255,0.2);
}


#nfs-car-browser .nfsCB-hint--bottom{
  text-align:center;
  padding:10px 12px 14px;
  font-size:11px;
  color:rgba(255,255,255,0.55);
  border-top:1px solid rgba(255,255,255,0.08);
}


/* ✅ HOME slideshow hero heading — smaller on small phones only */
@media screen and (max-width: 480px) {

  /* Target the actual heading element */
  .slideshow__slide-heading.section-title,
  h2.slideshow__slide-heading.section-title,
  .slideshow__slide-heading.section-title .section-title__text {
    font-size:3.2rem !important; /* tweak this */
    line-height: 1.08 !important;
  }

}

/* Center AI daily limit badge */
.nfsCB-aiModePanel{
  display: flex;
  flex-direction: column;
}

/* AI daily limit badge */
.nfsCB-aiLimit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin: 10px 0 6px 0;
  padding: 5px 10px;
  margin-top: 20px !important;

  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;

  color: #FFFFFF;
  background: rgba(111, 43, 255, 0.18);
  border: 1px solid rgba(111, 43, 255, 0.45);
  border-radius: 999px;

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 2px 8px rgba(111, 43, 255, 0.15);

  backdrop-filter: blur(4px);
}


.nfsCB-aiLimit strong{
  margin-right: 4px;
  display: inline-block;
}


.nfsCB-aiToast{
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  pointer-events: none;
}

.nfsCB-aiToastCard{
  pointer-events: auto;
  transform: translateY(38vh); /* moves it lower than dead center */
}


/* =========================================
   Mobile panel vertical tuning by screen height
   ========================================= */

/* Base mobile (most phones) */
@media (max-width: 768px){
  .nfsCB-panel{
    transform: translateY(40px) !important;
  }
}

/* Taller phones (iPhone 12 / 13 / 14 / 15 / 16 Pro) */
@media (max-width: 768px) and (min-height: 780px){
  .nfsCB-panel{
    transform: translateY(50px) !important;
  }
}

/* Extra tall phones (iPhone Plus / Pro Max like 16 Plus) */
@media (max-width: 768px) and (min-height: 860px){
  .nfsCB-panel{
    transform: translateY(40px) !important;
  }
}


/* iPhone 12-ish and smaller */
@media (max-width: 430px){

  /* force the AI mode pill row to behave */
  .nfsCB-panel .nfsCB-aiModeTabs{
    height: 40px !important;
    padding: 5px !important;
  }

  /* ✅ correct target (wins against other styles) */
  .nfsCB-panel .nfsCB-aiModeTabs button[data-nfs-ai-mode-tab]{
    flex: 1 1 0 !important;
    min-width: 0 !important;          /* allows text to shrink inside flex */
    padding: 0 8px !important;
    font-size: 9.8px !important;     /* actually applies now */
    line-height: 1 !important;
    letter-spacing: 0.01em !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* slider stays aligned */
  .nfsCB-panel .nfsCB-aiModeSlider{
    top: 5px !important;
    left: 5px !important;
    height: calc(100% - 10px) !important;
    width: calc(50% - 5px) !important;
  }
}


/* ==========================================================
   ✅ STOP BACKGROUND SCROLL when NFS panel is open (iOS fix)
   - Works on small iPhones where background still scrolls
   - Keeps scrolling INSIDE the modal/panel
   ========================================================== */



/* Ensure the modal content itself can scroll */
.nfsCB-panel,
.nfsCB-body,
.nfsCB-aiScroll{
  overscroll-behavior: contain;
}

.nfsCB-body,
.nfsCB-aiScroll{
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* If your panel uses a specific inner scroll area, prioritize it */
.nfsCB-panel .nfsCB-body{
  overflow: auto;
  max-height: 100dvh;
}



/* ==========================================================
   iOS fix: allow full scroll to bottom of AI panel
   (prevents bottom buttons being cut off on small iPhones)
   ========================================================== */

@media (max-width: 768px){

  /* Make the panel use dynamic viewport height */
  .nfsCB-panel{
    height: 100dvh !important;
    max-height: 100dvh !important;
    display: flex;
    flex-direction: column;
  }

  /* This is the scrollable area inside the panel */
  .nfsCB-aiScroll{
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 120px; /* space for bottom buttons */
  }

  /* Safe area for iPhone home bar */
  .nfsCB-aiScroll{
    padding-bottom: calc(120px + env(safe-area-inset-bottom));
  }

  /* Ensure action buttons are not clipped */
  .nfsCB-aiActions{
    position: sticky;
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  
}

@media (max-width: 768px){

  /* Allow scrolling past the action buttons so the panel bottom edge is visible */
  .nfsCB-aiActions::after{
    content: "";
    display: block;
    height: 24px; /* small breathing room to reveal the panel outline */
  }

}


@media (max-width: 768px){
  .nfsCB-aiScroll,
  .nfsCB-body.nfsCB-panelBody{
    padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
  }
}


/* ✅ Keep Use / Save / Start Over on ONE ROW on phones (no ellipsis) */
@media (max-width: 768px){
  .nfsCB-aiActions{
    display:flex !important;
    flex-wrap: nowrap !important;     /* force 1 row */
    gap: 8px !important;
    width: 100%;
  }

  .nfsCB-aiActions button{
    flex: 1 1 0 !important;           /* equal widths */
    min-width: 0 !important;          /* IMPORTANT: allows flex items to shrink */
    padding: 10px 8px !important;     /* tighter */
    line-height: 1 !important;
    letter-spacing: 0.03em !important;

    white-space: nowrap !important;   /* one line */
    overflow: hidden !important;      /* keep inside */
    text-overflow: clip !important;   /* no "..." */
    font-size: 11px !important;       /* baseline for most phones */
  }

  /* Slightly smaller on really small iPhones (like iPhone 12 / 390px wide) */
  @media (max-width: 400px){
    .nfsCB-aiActions button{
      font-size: 10px !important;
      padding: 10px 6px !important;
      letter-spacing: 0.02em !important;
    }
  }
}


/* Base phone size (iPhone 12, 13, 14, etc) */
@media (max-width: 430px){
  #nfsCB-ai-uploadBtn{
    width: 78vw !important;      /* shorter on small phones */
    max-width: 340px;
    padding: 12px 20px !important;
    margin: 0 auto;
    display: block;
  }
}

/* Large phones (Plus / Pro Max) */
@media (min-width: 431px) and (max-width: 768px){
  #nfsCB-ai-uploadBtn{
    width: 85vw !important;      /* longer on big phones */
    max-width: 420px;
    padding: 12px 22px !important;
    margin: 0 auto;
    display: block;
  }
}





/* ===== Light scrollbar for Car Browser panel (desktop + mobile where visible) ===== */

/* Chrome / Safari / Edge */
#nfs-car-browser .nfsCB-body::-webkit-scrollbar{
  width: 6px;
}

#nfs-car-browser .nfsCB-body::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.15);
}

#nfs-car-browser .nfsCB-body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.6);
  border-radius: 6px;
}

#nfs-car-browser .nfsCB-body::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,0.85);
}

/* Firefox */
#nfs-car-browser .nfsCB-body{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.6) rgba(255,255,255,0.15);
}





/* iPhone 16 Plus / big iPhones (query confirmed by your red outline) */
@media screen and (min-width: 420px) and (max-width: 460px) {

  /* Smash whatever the theme is doing (h1/h2 + common slideshow heading wrappers) */
  .slideshow__slide-content-inner h1,
  .slideshow__slide-content-inner h2,
  .slideshow__slide-content-inner .slideshow__slide-heading,
  .slideshow__slide-content-inner .slideshow__slide-heading .section-title__text,
  .slideshow__slide-content-inner .section-title__text,
  .slideshow__slide-content-inner [class*="heading"] {
    font-size: 3.4rem !important;
    line-height: 1.06 !important;
  }

}

/* ==========================================================
   ✅ HARD KILL the white sweep / flash while in Step 1
   (only allow any animation when Step 2 editor is enabled)
   ========================================================== */

/* 1) While editor is DISABLED (Step 1): kill ALL animations + pseudo sweeps */
#neon-frame-product-section #nfs-editor.nfs-designer--disabled #nfs-add-to-cart,
#neon-frame-product-section #nfs-editor.nfs-designer--disabled #nfs-add-to-cart::before,
#neon-frame-product-section #nfs-editor.nfs-designer--disabled #nfs-add-to-cart::after{
  animation: none !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
}

/* If the flash is a moving gradient on ::after/::before, remove it completely */
#neon-frame-product-section #nfs-editor.nfs-designer--disabled #nfs-add-to-cart::before,
#neon-frame-product-section #nfs-editor.nfs-designer--disabled #nfs-add-to-cart::after{
  content: none !important;
  display: none !important;
  background: none !important;
}

/* 2) When Step 2 is ACTIVE: allow your Step-2-only entrance animation */
#neon-frame-product-section #nfs-editor:not(.nfs-designer--disabled) #nfs-add-to-cart{
  animation: nfsAddToCartIn 520ms cubic-bezier(.16,1,.3,1) both !important;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
  will-change: transform, opacity;
}

@keyframes nfsAddToCartIn{
  0%{ opacity:0; transform: translateY(14px) scale(0.985); filter: blur(6px); }
  60%{ opacity:1; transform: translateY(-2px) scale(1.01); filter: blur(0); }
  100%{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
}




/* ==========================================================
   ANY NEW CODE BELOW
   ========================================================== */

/* ==========================================================
   ✅ NFS Car Browser — Mobile accordion slide-down animation
   Replaces display:none/block (which cannot animate)
   Uses max-height + opacity + translateY for smooth open/close
   ========================================================== */

@media (max-width: 920px){

  /* Make sure the accordion body is always "there" so it can animate */
  #nfs-car-browser .nfsCB-accBody{
    display: block !important;            /* override old display:none */
    overflow: hidden !important;
    max-height: 0 !important;             /* collapsed */
    opacity: 0 !important;
    transform: translateY(-6px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    transition:
      max-height 280ms ease,
      opacity 220ms ease,
      transform 220ms ease,
      padding 220ms ease;
    will-change: max-height, opacity, transform;
  }

  /* Expanded state */
  #nfs-car-browser .nfsCB-acc.open .nfsCB-accBody{
    max-height: 46vh !important;          /* matches your original intent */
    opacity: 1 !important;
    transform: translateY(0) !important;
    padding-top: 10px !important;         /* restore your original padding */
    padding-bottom: 10px !important;
  }

  /* Chev rotation already exists, but ensure it animates smoothly */
  #nfs-car-browser .nfsCB-accBtn .chev{
    transition: transform 220ms ease;
  }
}


/* ==========================================================
   🎯 Guided Selection Highlight (Mobile Accordion)
   Highlights the next required step: Make → then Model
   ========================================================== */

@media (max-width: 920px){

  /* Base glow style */
  .nfsCB-acc.is-required .nfsCB-accBtn{
    box-shadow:
      0 0 0 2px rgba(111,43,255,0.9),
      0 0 18px rgba(111,43,255,0.6),
      0 0 40px rgba(111,43,255,0.35);
    animation: nfsPulseGlow 1.6s ease-in-out infinite;
  }

  @keyframes nfsPulseGlow{
    0%{ box-shadow: 0 0 0 2px rgba(111,43,255,0.7), 0 0 12px rgba(111,43,255,0.4); }
    50%{ box-shadow: 0 0 0 3px rgba(111,43,255,1), 0 0 26px rgba(111,43,255,0.8); }
    100%{ box-shadow: 0 0 0 2px rgba(111,43,255,0.7), 0 0 12px rgba(111,43,255,0.4); }
  }
}


#nfs-car-browser .nfsCB-or{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 14px 0 18px;
}

#nfs-car-browser .nfsCB-or::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(111,43,255,0.9),
    rgba(160,120,255,0.9),
    rgba(111,43,255,0.9),
    transparent
  );
  filter: drop-shadow(0 0 6px rgba(111,43,255,0.8));
}

#nfs-car-browser .nfsCB-or span{
  position: relative;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(20,16,35,0.95);
  border: 1px solid rgba(111,43,255,0.6);
  color: #e6d8ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.35em;
  text-shadow: 0 0 8px rgba(140,90,255,0.9);
  box-shadow:
    0 0 12px rgba(111,43,255,0.35),
    inset 0 0 6px rgba(255,255,255,0.08);
}



/* Allow the "Please note..." disclaimer to wrap fully on small phones */
@media (max-width: 480px){
  .nfsCB-hint,
  .nfsCB-hint--bottom{
    white-space: normal !important;
    line-height: 1.35 !important;
    max-width: 100% !important;
    font-size: 10px !important;
  }
}

/* =========================================
   NFS Car Browser — keep Model LOCKED but not grey/outlined
   ========================================= */

/* 1) Remove disabled greying */
#nfs-car-browser .nfsCB-accBtn[disabled],
#nfs-car-browser .nfsCB-accBtn[aria-disabled="true"]{
  opacity: 1 !important;
  filter: none !important;
  cursor: pointer !important;
}

/* 2) Remove the "disabled outline" / strong border feel (only when locked) */
#nfs-car-browser .nfsCB-accBtn[disabled],
#nfs-car-browser .nfsCB-accBtn[aria-disabled="true"]{
  border-bottom-color: rgba(255,255,255,0.18) !important; /* dim divider line */
  box-shadow: none !important;                             /* kill any ring/glow */
}

/* 3) Make the text look normal */
#nfs-car-browser .nfsCB-accBtn[disabled] *,
#nfs-car-browser .nfsCB-accBtn[aria-disabled="true"] *{
  opacity: 1 !important;
  color: rgba(255,255,255,0.92) !important;
}

/* 4) If you have a chevron icon, keep it visible */
#nfs-car-browser .nfsCB-accBtn[disabled] .chev,
#nfs-car-browser .nfsCB-accBtn[aria-disabled="true"] .chev{
  opacity: 1 !important;
}



/* ==========================================================
   ✅ FIX: allow scrolling inside Make/Model lists on PHONE
   Keep your open/close animation, but unlock scroll when open
   ========================================================== */
@media (max-width: 920px){

  /* Closed: keep hidden for the animation */
  #nfs-car-browser .nfsCB-accBody{
    overflow: hidden !important;
  }

  /* Open: allow the accordion body to become the scroll container */
  #nfs-car-browser .nfsCB-acc.open .nfsCB-accBody{
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  /* Optional: if the list itself should scroll instead (sometimes cleaner) */
  #nfs-car-browser .nfsCB-acc.open .nfsCB-list{
    max-height: 42vh;              /* slightly less than accBody max-height */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
}







/* Make & Model rows – subtle white outline for outdoor visibility (phone + desktop) */
#nfs-car-browser .nfsCB-item,
#nfs-car-browser .nfsCB-listItem,
#nfs-car-browser .nfsCB-row,
#nfs-car-browser .nfsCB-card{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.65);
}

/* Stronger outline when hovered / tapped / selected */
#nfs-car-browser .nfsCB-item:hover,
#nfs-car-browser .nfsCB-item:active,
#nfs-car-browser .nfsCB-item.is-active,
#nfs-car-browser .nfsCB-listItem:hover,
#nfs-car-browser .nfsCB-listItem.is-active{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.75),
    0 0 10px rgba(255,255,255,0.25);
}








/* NFS ClearX — SVG-based (consistent sizing on iOS) */
:root{
  --nfs-clearx-size: 30px;     /* button */
  --nfs-clearx-icon: 14px;     /* X icon */
}

.nfs-clearbtn-smart{
  position: absolute !important;
  left: 0;
  top: 0;

  width: var(--nfs-clearx-size);
  height: var(--nfs-clearx-size);
  border-radius: 999px;

  display: none;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);

  cursor: pointer;
  z-index: 99999;

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.12) inset,
    0 8px 20px rgba(0,0,0,0.5);

  -webkit-tap-highlight-color: transparent;
}

.nfs-clearbtn-smart:hover{ filter: brightness(1.05); }
.nfs-clearbtn-smart:active{ transform: scale(0.96); }

.nfs-clearbtn-smart svg{
  width: var(--nfs-clearx-icon);
  height: var(--nfs-clearx-icon);
  display: block;
}

.nfs-clearbtn-smart svg path{
  stroke: rgba(255,255,255,0.96);
  stroke-width: 3;
  stroke-linecap: round;
}


/* --- FIX: ensure the X icon renders on small iPhones --- */
.nfs-clearbtn-smart{
  color: rgba(255,255,255,0.96) !important; /* drives currentColor */
}

.nfs-clearbtn-smart svg{
  width: var(--nfs-clearx-icon) !important;
  height: var(--nfs-clearx-icon) !important;
  display: block !important;
  overflow: visible !important;
}

.nfs-clearbtn-smart svg *{
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 1 !important;
  visibility: visible !important;
}







/* =========================================
   NFS Car Browser — Photos EMPTY state centered (SAFE)
   Centers the message ONLY when the Photos panel is empty
   ========================================= */

/* Default: do NOT change layout of the photos container */
#nfs-car-browser .nfsCB-photos{
  /* leave it alone so real photo grids/layouts don’t break */
}

/* If Photos contains ONLY the empty message, center it */
#nfs-car-browser .nfsCB-photos:has(> .nfsCB-empty){
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* The empty message */
#nfs-car-browser .nfsCB-photos > .nfsCB-empty{
  width: 100%;
  padding: 12px 14px;
  margin: 0;
  opacity: 0.9;
}

/* Desktop: keep on one line */
@media (min-width: 921px){
  #nfs-car-browser .nfsCB-photos > .nfsCB-empty{
    white-space: nowrap;
  }
}

/* Mobile: allow wrapping */
@media (max-width: 920px){
  #nfs-car-browser .nfsCB-photos > .nfsCB-empty{
    white-space: normal;
    line-height: 1.35;
  }
}






/* Kill iPhone 16 Plus safe-area hairline between announcement bar and header */
@supports (padding: max(0px)) {
  .announcement-bar,
  .header-wrapper,
  header,
  .shopify-section-header {
    background-color: #000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Force overlap to remove subpixel gap */
  .shopify-section-header {
    margin-top: -1px;
  }
}






/* Make the wrapper stack button + link */
.slideshow .slideshow__slide-button-wrapper{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

/* Desktop spacing */
.slideshow .nfsExamplesLinkWrap{
  margin-top: 36px;            /* <-- desktop distance */
  line-height: 1;
  text-align: center;
  width: 100%;
  font-weight: 900; 
}

/* Phone spacing (tighter) */
@media (max-width: 767.98px){
  .slideshow .nfsExamplesLinkWrap{
    margin-top: 44px;          /* <-- phone distance */
  }
}

/* Styled “button-like” link */
.slideshow .nfsExamplesLink{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;

  font-size: 12.5px;
  line-height: 1;
  letter-spacing: .2px;

  color: rgba(255,255,255,0.82);
  text-decoration: none;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.25);

  transition: opacity .2s ease, transform .2s ease, background .2s ease, border-color .2s ease;
}

/* Hover/press */
.slideshow .nfsExamplesLink:hover{
  opacity: 1;
  transform: translateY(-1px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.20);
}

.slideshow .nfsExamplesLink:active{
  transform: translateY(0px) scale(0.98);
}

.slideshow .nfsExamplesArrow{
  transition: transform .2s ease;
}

.slideshow .nfsExamplesLink:hover .nfsExamplesArrow{
  transform: translateX(3px);
}






@media (max-width: 360px){
  .slideshow .section-title__text{
    font-size: 0.75em;
  }
}







.nfsExamplesLink{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}




@media (max-width: 390px){
  #nfs-save-indicator-2{
    font-size: 7.5px;
    max-width: 92%;
    text-align: center;
  }
}







/* Center the whole "Generate with AI" block */
.nfsCB-noResultsCta{
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex;
  flex-direction: column;
  align-items: center;          /* centers inner content */
}

/* Center the glow frame (if present) */
.nfsCB-noResultsCtaInner,
.nfsCB-noResultsCtaFrame{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Center the purple button itself */
.nfsCB-noResultsCtaBtn{
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}


/* Space above the "Generate with AI" container */
.nfsCB-noResultsCta{
  margin-top: 24px !important;   /* adjust: 12–32px to taste */
}


@media (min-width: 990px){
  .nfsCB-noResultsCta{
    margin-top: 24px !important;
  }
}



/* Center "Generate with AI" container + button on phone */
@media (max-width: 640px){
  .nfsCB-noResultsCta{
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
    align-items: center;
  }

  .nfsCB-noResultsCtaInner,
  .nfsCB-noResultsCtaFrame{
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .nfsCB-noResultsCtaBtn{
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-flex;
    justify-content: center;
  }
}



/* =========================================================
   NFS TBO — Fix "remote bounces right" on small phones
   - Lock X translation to -50% always
   - Only animate Y/scale on press
   ========================================================= */
@media (max-width: 520px){
  #nfs-try-before-ordering .nfs-tbo__remote{
    left: 50% !important;
    transform: translate3d(-50%, 0, 0) !important; /* lock X */
    transform-origin: center bottom;
  }

  /* stop the float keyframes from re-writing transform on tiny screens */
  #nfs-try-before-ordering .nfs-tbo__remote{
    animation: none !important;
  }

  /* recreate the float using translateY only (no X changes) */
  #nfs-try-before-ordering .nfs-tbo__remote{
    animation: nfsTboFloatY 3.8s ease-in-out infinite !important;
  }
  @keyframes nfsTboFloatY{
    0%,100% { transform: translate3d(-50%, 0, 0); }
    50%     { transform: translate3d(-50%, -6px, 0); }
  }

  /* press state: keep X locked, just nudge Y + scale */
  #nfs-try-before-ordering .nfs-tbo__remote.is-pressed{
    transform: translate3d(-50%, 1px, 0) scale(0.99) !important;
  }
}





#nfs-rotating-text{
  margin-top: 1px;
  margin-bottom: 10px;
  padding: 2px 4px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.2px;
  line-height: 1.35;
  opacity: 0.9;
  transition: opacity 0.3s ease;

  white-space: normal;
  overflow: hidden;
  word-break: break-word;

  display: block !important;
  height: calc(1.35em * 2);   /* lock exact 2-line height */
  min-height: calc(1.35em * 2);
  max-height: calc(1.35em * 2);
}


@keyframes nfsBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}



/* iPhone 12 / 13 / 14 / 15 size */
@media (max-width: 390px){
  #nfs-rotating-text{
    font-size: 9.3px;
  }
}

/* Very small phones (SE / mini) */
@media (max-width: 360px){
  #nfs-rotating-text{
    font-size: 9px;
  }
}




/* Keep the two canvas pills side-by-side even on small phones */
@media (max-width: 2000px){
  #neon-frame-product-section .nfs-canvas-tools{
    flex-wrap: nowrap !important;
  }
  #neon-frame-product-section .nfs-canvas-tools > button{
    flex: 0.95 1 0 !important;
    min-width: 0 !important;
    padding-left: 10px;
    padding-right: 10px;
  }
}



/* NFS — make the capture-idea label smaller on small iPhones */
@media screen and (max-width: 400px){
  #neon-frame-product-section span.nfs-label.nfs-label--mode{
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.1px !important;
  }
}

/* Even smaller phones */
@media screen and (max-width: 360px){
  #neon-frame-product-section span.nfs-label.nfs-label--mode{
    font-size: 9px !important;
  }
}



/* iPhone 12 / 13 / 14 / 15 size and smaller */
@media (max-width: 390px){
  .nfsCB-title{
    font-size: 8.5px !important;
    letter-spacing: 0.1px;
  }
}





/* =========================================================
   NFS — Preferred Frame Rotation (iPhone-smooth, like Mode Toggle)
   ========================================================= */

.nfs-tool-group--rotation{ margin: 10px 0 14px; }

/* Make the title match your other labels */
.nfs-segTitle{
  display: block;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  padding: 0;
  margin: 0 0 0.45rem 0;

  font-size: clamp(0.75rem, 2.5vw, 1rem);
  letter-spacing: 0;
  word-spacing: 0;
  color: rgba(255,255,255,0.92);
  font-weight: 600;
}

/* Outer pill */
.nfs-segWrap{
  position: relative;
  display: flex;
  gap: 0;
  padding: 4px;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;

  background: rgba(0,0,0,0.50);
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 10px 24px rgba(0,0,0,0.38);

  -webkit-tap-highlight-color: transparent;
}

/* Sliding highlight pill (the ONLY moving thing) */
.nfs-segWrap::before{
  content:"";
  position: absolute;
  top: 4px;
  left: 4px;

  width: calc(33.3333% - 2.6667px); /* 1/3 of container minus tiny rounding */
  height: calc(100% - 8px);

  border-radius: 999px;

  background: linear-gradient(90deg,
    rgba(125, 219, 255, 0.95) 0%,
    rgba(140, 120, 255, 0.92) 45%,
    rgba(166, 70, 255, 0.92) 100%
  );

  box-shadow:
    0 0 14px rgba(111,43,255,0.28),
    0 10px 18px rgba(0,0,0,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.18);

  /* white outline like your other toggle */
  outline: 1.5px solid rgba(255,255,255,0.85);
  outline-offset: -1.5px;

  transform: translate3d(0,0,0);
  transition: transform 520ms cubic-bezier(.18,.95,.18,1);
  will-change: transform;

  z-index: 1;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Move highlight based on CHECKED radio (smooth on iPhone) */
.nfs-segWrap:has(#nfs-rot-portrait:checked)::before{
  transform: translate3d(100%,0,0);
}
.nfs-segWrap:has(#nfs-rot-landscape:checked)::before{
  transform: translate3d(200%,0,0);
}

/* hide radios but keep accessible */
.nfs-seg__radio{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* Tabs */
.nfs-seg__tab{
  flex: 1;
  position: relative;
  z-index: 2;

  border: 0 !important;
  background: transparent !important;
  border-radius: 999px !important;

  display:flex;
  align-items:center;
  justify-content:center;

  /* typography matches your style */
  padding: 10px 10px !important;
  font-weight: 750 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.05;

  color: rgba(255,255,255,0.82) !important;

  /* never wrap on phones */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* smooth scale across sizes */
  font-size: clamp(0.80rem, 2.7vw, 1.02rem);

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  gap: 6px;
}

/* Active text: dark on bright pill */
#nfs-rot-auto:checked + label,
#nfs-rot-portrait:checked + label,
#nfs-rot-landscape:checked + label{
  color: rgba(7,7,10,0.92) !important;
}

/* Icons */
.nfs-rot-icon{
  display:inline-block;
  border-radius:4px;
  border: 2px solid currentColor;
  opacity: 0.9;
  flex: 0 0 auto;
}

.nfs-rot-icon--auto{ width: 12px; height: 12px; }
.nfs-rot-icon--portrait{ width: 10px; height: 16px; }
.nfs-rot-icon--landscape{ width: 16px; height: 10px; }

/* Slightly larger on desktop (matches your other toggle behaviour) */
@media (min-width: 900px){
  .nfs-segWrap{ padding: 5px; }
  .nfs-segWrap::before{
    top: 5px; left: 5px;
    height: calc(100% - 10px);
    width: calc(33.3333% - 3.3333px);
  }
  .nfs-seg__tab{
    padding: 11px 14px !important;
    font-size: 1.02rem !important;
    font-weight: 800 !important;
  }
}

/* Smaller phones: tighten */
@media (max-width: 390px){
  .nfs-seg__tab{ padding: 10px 8px !important; gap: 5px; }
  .nfs-rot-icon--auto{ width: 11px; height: 11px; }
  .nfs-rot-icon--portrait{ width: 9px; height: 14px; }
  .nfs-rot-icon--landscape{ width: 14px; height: 9px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .nfs-segWrap::before{ transition: none !important; }
}




/* Change Photo — Primary Neon Action */
button#nfs-change-photo.nfs-canvas-btn{
  background: linear-gradient(90deg, #32f0ff, #b82bff) !important;
  color: #0b0b12 !important;
  font-weight: 700 !important;   /* bolder text */

  border: 1.5px solid #ffffff !important;
  outline: none !important;

  box-shadow:
    0 0 18px rgba(184,43,255,0.55),
    0 10px 24px rgba(0,0,0,0.45) !important;

  border-radius: 6px !important;
  background-clip: padding-box !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
}


/* Thicker outline on desktop */
@media (min-width: 900px){
  button#nfs-change-photo.nfs-canvas-btn{
    border-width: 3px !important;
  }
}








/* Canvas header layout */
.nfs-canvas-header{
  display:flex;
  align-items:center;
}

/* White vertical divider */
.nfs-header-divider{
  width:1px;
  height:26px;
  background: rgba(255,255,255,0.7);
  box-shadow: 0 0 6px rgba(255,255,255,0.4);
  margin: 0 14px;          /* <-- THIS controls the gap on both sides */
  flex-shrink:0;
}

/* Right group */
.nfs-header-right{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Desktop fine-tune */
@media (min-width: 900px){
  .nfs-header-divider{ margin: 0 18px; }
  .nfs-header-right{ gap: 12px; }
}

/* Phone fine-tune */
@media (max-width: 480px){
  .nfs-header-divider{
    height:22px;
    margin: 0 10px;
  }
  .nfs-header-right{ gap:8px; }
}



/* Small iPhones (SE / Mini / narrow widths) */
@media (max-width: 440px){
  .nfs-header-right{
    gap: 6px;                 /* closer together */
  }

  .nfs-canvas-btn{
    padding: 4px 10px !important;   /* slightly smaller buttons */
    font-size: 9px !important;     /* tighter text */
  }

  .nfs-header-divider{
    margin: 0 4px;           /* pull divider closer too */
    height: 20px;
  }
}












/* =========================
   NFS Clear Confirm Popover
   ========================= */
.nfs-pop{
  position: fixed;
  z-index: 999999;
  left: -9999px; /* parked off-screen when closed */
  top: -9999px;
  width: auto;
  height: auto;
}

.nfs-pop__card{
  width: min(300px, calc(100vw - 24px));
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.85);
  background: linear-gradient(180deg, rgba(21,19,33,0.98), rgba(11,11,16,0.98));
  box-shadow: 
  0 0 0 1px rgba(255,255,255,0.4),
  0 18px 55px rgba(0,0,0,0.55);
  padding: 12px 12px 10px;

  transform-origin: var(--nfs-pop-ox, 50%) var(--nfs-pop-oy, 12px);
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,1.2,.2,1);
}

.nfs-pop.is-open .nfs-pop__card{
  opacity: 1;
  transform: translateY(0) scale(1);
}


.nfs-pop__title{
  font-weight: 900;
  color: rgba(255,255,255,0.92);
  font-size: 15px;
  letter-spacing: .02em;
  margin-bottom: 2px;
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 3px ;
}

.nfs-pop__sub{
  color: rgba(255,255,255,0.66);
  font-weight: 650;
  font-size: 12px;
  line-height: 1.35;
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 2px;
}

.nfs-pop__actions{
  display: flex;
  gap: 10px;
  justify-content: center;
}


.nfs-pop__btn{
  appearance:none;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .04em;
  cursor: pointer;
}

.nfs-pop__btn--no{
  border: 1.5px solid rgba(255,255,255,0.95);
  color: #ffffff;
  background: transparent;
  box-shadow: 0 0 0 rgba(255,255,255,0);
}


.nfs-pop__btn--yes{
  border: 1.5px solid rgba(255,255,255,0.95);
  color: #ffffff;
  background: transparent;
}


/* Background blur + dim when confirm is open */
.nfs-pop-backdrop{
  position: fixed;
  inset: 0;
  z-index: 999998;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}

.nfs-pop-backdrop.is-open{
  opacity: 1;
  pointer-events: auto;
}



/* Desktop only */
@media (min-width: 1024px){
  #nfs-rotating-text{
    font-size: 1.2em;   /* or try 1.1em */
    padding: 4px 8px;    /* optional: gives it a bit more height */
  }
}




.nfsCB-aisubLabel{
  display: block;
  text-align: center;
  font-weight: 200;       /* slight emphasis */
  letter-spacing: 0.2px; /* subtle premium feel */
  color: #ffffff;        /* front white */
  margin-bottom: 15px; 
  font-size: 13px; 
}

.nfsCB-aisubLabel{
  display: block;
  text-align: center;
  font-weight: 200;
  letter-spacing: 0.2px;
  color: #ffffff;
  margin-bottom: 15px;
  font-size: 13px;
}

/* Smaller iPhones (12 mini, SE, etc) */
@media (max-width: 390px){
  .nfsCB-aisubLabel{
    font-size: 11.5px;
    line-height: 1.35;
    margin-bottom: 16px; 
  }
}

/* Very small (SE / older minis) */
@media (max-width: 360px){
  .nfsCB-aisubLabel{
    font-size: 11px;
    margin-bottom: 16px; 
  }
}



.nfsCB-aiLabel{
  font-size: 18px !important;
}

@media (max-width: 430px){
  .nfsCB-aiLabel{
    font-size: 25px !important;
  }
}


/* Default */
.nfsCB-aiLabel{
  font-size: 18px;
}




.nfsCB-transformLabel{
  display:none;
  text-align:center;
  font-weight:300;
  letter-spacing:0.3px;
  color:#ffffff;
  margin:12px 0 6px;
  font-size:13px;
}




/* Bigger iPhones (Pro Max / Plus) */
@media (min-width: 420px) and (max-width: 500px){

  /* Title: "DESCRIBE HOW YOU WANT THIS PHOTO CHANGED" */
  .nfsCB-aiEditTitle{
    font-size: 13px !important;   /* slightly bigger */
    letter-spacing: 0.6px !important;
  }

  /* Subtitle: "Provide as much detail as possible..." */
  .nfsCB-transformLabel{
    font-size: 12px !important;   /* slightly smaller */
    opacity: 0.9 !important;
    margin-bottom: 10px !important;
  }

}



/* Bigger iPhones (Pro Max / Plus) */
@media (min-width: 330px) and (max-width: 419px){


  /* Subtitle: "Provide as much detail as possible..." */
  .nfsCB-transformLabel{
    font-size: 11px !important;   /* slightly smaller */
    opacity: 0.9 !important;
    margin-bottom: 10px !important;
  }

}

@media (min-width: 320px) and (max-width: 350px) {

  .nfs-pop__card{
    width: min(300px, calc(94vw - 24px));
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.85);
    background: linear-gradient(180deg, rgba(21,19,33,0.98), rgba(11,11,16,0.98));
    box-shadow: 
      0 0 0 1px rgba(255,255,255,0.4),
      0 18px 55px rgba(0,0,0,0.55);
    padding: 12px 12px 10px;

    transform-origin: var(--nfs-pop-ox, 50%) var(--nfs-pop-oy, 12px);
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
    transition: opacity .18s ease,
                transform .22s cubic-bezier(.2,1.2,.2,1);
  }

  .nfs-pop.is-open .nfs-pop__card{
    opacity: 1;
    transform: translateY(0) scale(1);
  }

}







/* ---------- OR divider (clean, minimal) ---------- */
.nfsCB-aiRefineDivider{
  display:flex;
  align-items:center;
  gap:12px;
  margin: 14px 0 12px;
}

.nfsCB-aiRefineLine{
  flex:1;
  height:1px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,0.25),
    rgba(255,255,255,0)
  );
}

.nfsCB-aiRefineOr{
  font-weight:800;
  letter-spacing:0.18em;
  font-size:11px;
  color: rgba(255,255,255,0.7);
}


/* ---------- Refine panel (soft glass, neutral) ---------- */
.nfsCB-aiRefinePanel{
  padding:14px 14px 16px;
  border-radius:14px;
  background: rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


/* ---------- Title (centered everywhere) ---------- */
.nfsCB-aiRefineTitle{
  text-align:center;
  font-weight:800;
  font-size:13px;
  letter-spacing:0.02em;
  margin-bottom:10px;
  color: rgba(255,255,255,0.9);
}


/* ---------- Textarea ---------- */
#nfsCB-ai-refine{
  width:100%;
  border-radius:12px;
  padding:12px;
  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.75);
  color:#fff;
  outline:none;
  resize:none;
}

#nfsCB-ai-refine::placeholder{
  color: rgba(255,255,255,0.5);
}

#nfsCB-ai-refine:focus{
  border-color: rgba(255,255,255,0.75);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
}


/* ---------- Regenerate button (calm premium, not neon) ---------- */
#nfsCB-ai-regenerate{
  width:100%;
  margin-top:10px;
  border-radius:12px;
  padding:12px;
  font-weight:800;
  letter-spacing:0.04em;
  text-transform:uppercase;

  background: linear-gradient(180deg, #6f2bff, #5a22cc);
  border:1px solid rgba(255,255,255,0.75);
  color:#fff;

  box-shadow:
    0 6px 18px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.2) inset;
}

#nfsCB-ai-regenerate:active{
  transform: scale(0.98);
}



.nfsCB-isGenerating #nfsCB-ai-refine,
.nfsCB-isGenerating #nfsCB-ai-regenerate{
  opacity: .55;
  pointer-events: none;
}


.nfsCB-aiRefineLine{
  flex:1;
  height:1px;
  background: linear-gradient(
    90deg,
    rgba(111,43,255,0),
    rgba(111,43,255,0.9),
    rgba(111,43,255,0)
  );
  box-shadow: 0 0 8px rgba(111,43,255,0.6);
}

.nfsCB-aiRefineOr{
  font-weight:1000;
  letter-spacing:0.2em;
  font-size:12px;
  text-shadow: 0 0 10px rgba(111,43,255,0.9);
  margin-top:8px;
  margin-bottom:8px;
}


/* Desktop-only hint overlay on preview */
.nfsCB-aiPreviewWrap{ position: relative; }

.nfsCB-aiDesktopHint{
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);

  padding: 8px 12px;
  border-radius: 999px;

  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.92);

  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.01em;

  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  pointer-events: none;
  z-index: 5;

  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}

.nfsCB-aiDesktopHint.is-show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* only show/animate on desktop */
@media (max-width: 989px){
  .nfsCB-aiDesktopHint{ display:none !important; }
}



.nfs-size-name {
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

.nfs-size-meta {
  font-weight: 500 !important;
  opacity: 0.85 !important;
}








#nfs-ar-btn{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  max-width: 280px !important;   /* nice wide hero feel */
  margin: 0px auto 0px auto !important;
  margin-bottom: 2px !important;

  padding: 12px 18px !important;
  border-radius: 999px !important;

  border: 1px solid rgba(255,255,255,0.35) !important;
  background: rgba(10,10,16,0.35) !important;
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;

  -webkit-backdrop-filter: blur(10px) saturate(1.25) !important;
  backdrop-filter: blur(10px) saturate(1.25) !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.25) inset,
    0 0 18px rgba(120,80,255,0.25) !important;
}

@media (max-width: 520px){
  #nfs-ar-btn{
    max-width: 81% !important;
    padding: 10px 14px !important;
    font-size: 11px !important;
    margin-bottom: 8px !important;
  }
}


/* Hide AR on desktop */
@media (min-width: 769px){
  #nfs-ar-btn{
    display: none !important;
  }
}

@media (max-width: 420px){
  #nfs-ar-btn{
    max-width: 90% !important;
    padding: 10px 14px !important;
    font-size: 11px !important;
    margin-bottom: 8px !important;
  }
}







/* =========================================================
   NFS — Premium Checkout Button (cart + drawer)
   - Subtle gradient, glow, hover lift
   - Mobile tap press-in
   - Does NOT affect Shop Pay / PayPal / GPay buttons
   ========================================================= */

/* Cart page checkout button */
.cart-footer__ctas .cart-footer__button[name="checkout"],
/* Cart drawer checkout button */
.cart-drawer__footer-ctas .cart-drawer__button[name="checkout"]{
  min-height: 54px;
  border-radius: 14px;

  font-weight: 800;
  letter-spacing: 0.2px;
  text-transform: none;

  background: linear-gradient(180deg, #ff3b2f 0%, #c1121f 100%) !important;
  border: 2.5px solid rgba(255,255,255,0.78) !important;

  box-shadow:
    0 10px 26px rgba(255, 59, 47, 0.35),
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 0 22px rgba(255, 59, 47, 0.20);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
  will-change: transform, box-shadow, filter;

  position: relative;
  overflow: hidden;
}

.cart-footer__ctas .cart-footer__button[name="checkout"]::before,
.cart-drawer__footer-ctas .cart-drawer__button[name="checkout"]::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%,
      rgba(255,255,255,0.26) 0%,
      rgba(255,255,255,0.06) 35%,
      rgba(255,255,255,0.00) 60%);
  pointer-events: none;
  opacity: 0.85;
}

.cart-footer__ctas .cart-footer__button[name="checkout"]::after,
.cart-drawer__footer-ctas .cart-drawer__button[name="checkout"]::after{
  content: "";
  position: absolute;
  top: -40%;
  left: -60%;
  width: 60%;
  height: 180%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0) 100%);
  transform: rotate(18deg) translateX(0);
  opacity: 0;
  pointer-events: none;
}

@media (hover:hover) and (pointer:fine){
  .cart-footer__ctas .cart-footer__button[name="checkout"]:hover,
  .cart-drawer__footer-ctas .cart-drawer__button[name="checkout"]:hover{
    transform: translateY(-2px) scale(1.01);
    filter: brightness(1.03) saturate(1.02);
    box-shadow:
      0 14px 34px rgba(255, 59, 47, 0.45),
      0 0 0 1px rgba(255,255,255,0.08) inset,
      0 0 30px rgba(255, 59, 47, 0.26);
  }

  .cart-footer__ctas .cart-footer__button[name="checkout"]:hover::after,
  .cart-drawer__footer-ctas .cart-drawer__button[name="checkout"]:hover::after{
    opacity: 1;
    transform: rotate(18deg) translateX(240%);
    transition: transform .55s ease, opacity .22s ease;
  }
}

.cart-footer__ctas .cart-footer__button[name="checkout"]:focus-visible,
.cart-drawer__footer-ctas .cart-drawer__button[name="checkout"]:focus-visible{
  outline: none !important;
  box-shadow:
    0 14px 34px rgba(255, 59, 47, 0.45),
    0 0 0 3px rgba(255, 59, 47, 0.35),
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 0 30px rgba(255, 59, 47, 0.26);
}

.cart-footer__ctas .cart-footer__button[name="checkout"]:active,
.cart-drawer__footer-ctas .cart-drawer__button[name="checkout"]:active{
  transform: translateY(0) scale(0.995);
  filter: brightness(0.98);
  box-shadow:
    0 8px 18px rgba(255, 59, 47, 0.32),
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 0 18px rgba(255, 59, 47, 0.18);
}

.cart-footer__ctas .cart-footer__button[name="checkout"][disabled],
.cart-drawer__footer-ctas .cart-drawer__button[name="checkout"][disabled]{
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  filter: none !important;
}






/* NFS dropdown font sizing — target the REAL text nodes */
@media (max-width: 390px){

  /* 1) The selected value / placeholder text inside the button */
  button.nfs-dd_btn .nfs-dd__value{
    font-size: 12.5px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    max-width: 100% !important;
  }

  /* Keep the button itself from wrapping / growing */
  button.nfs-dd_btn{
    min-height: 42px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    white-space: nowrap !important;
  }

  /* 2) The actual dropdown list items (when opened) */
  .nfs-dd__panel[role="listbox"]{
    font-size: 12.5px !important;
    line-height: 1.2 !important;
  }

  /* Covers common option structures inside the panel */
  .nfs-dd__panel[role="listbox"] [role="option"],
  .nfs-dd__panel[role="listbox"] button,
  .nfs-dd__panel[role="listbox"] .nfs-dd__option{
    font-size: 12.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}




/* Smaller cart reassurance on small iPhones only */
@media (max-width: 390px) {

  .nfs-cart-reassurance {
    font-size: 11.5px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.1px;
  }

}



/* NFS — keep "Original photo: Received — View" on ONE line (small iPhones) */
@media (max-width: 390px){

  .cart-item__option{
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  .cart-item__option-label{
    white-space: nowrap !important;
    margin-right: 2px !important;
  }

  .cart-item__option > span,
  .cart-item__option > a{
    white-space: nowrap !important;
  }

  /* Let the link compress instead of wrapping */
  .cart-item__option > a.link{
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
    max-width: 40vw; /* adjust if you want more/less room */
  }

  /* Optional: tiny tighten without noticeable change */
  .cart-item__option,
  .cart-item__option *{
    letter-spacing: -0.2px !important;
  }
}




.nfs-hero-micro{
  margin-top: 12px;
  margin-bottom: 12px;
  text-align: center;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
  text-shadow: 0 1px 12px rgba(0,0,0,0.45);
  user-select: none;
  pointer-events: none;
}

@media (min-width: 990px){
  .nfs-hero-micro{
    font-size: 13px;
    margin-top: 12px;
  }
}





/* ==========================================================
   🔮 NFS — AR UI (Button + Helper)
   Goal:
   - AR button hidden by default, shown ONLY when JS removes [hidden]
   - Helper text shows on mobile/tablet (your HTML text)
   - Helper text changes on desktop (CSS replaces copy, no ghost text)
   - Desktop + mobile spacing tuned
========================================================== */

/* ---------- AR BUTTON ---------- */

#nfs-ar-btn{
  /* IMPORTANT: do NOT force display here (JS + [hidden] controls visibility) */
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  max-width: 280px !important;   /* nice wide hero feel */
  margin: 0px auto 0px auto !important;
  margin-bottom: 2px !important;

  padding: 12px 18px !important;
  border-radius: 999px !important;

  border: 1px solid rgba(255,255,255,0.55) !important;
  background: rgba(10,10,16,0.35) !important;
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;

  -webkit-backdrop-filter: blur(10px) saturate(1.25) !important;
  backdrop-filter: blur(10px) saturate(1.25) !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.25) inset,
    0 0 18px rgba(120,80,255,0.25) !important;
}

/* ✅ ONLY show when JS removes [hidden] */
#nfs-ar-btn:not([hidden]){
  display: flex !important;
}

/* 🔒 If hidden attribute exists, ALWAYS hide no matter what */
#nfs-ar-btn[hidden]{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Button sizing tweaks */
@media (max-width: 520px){
  #nfs-ar-btn{
    max-width: 81% !important;
    padding: 10px 14px !important;
    font-size: 11px !important;
    margin-bottom: 8px !important;
  }
}

@media (max-width: 420px){
  #nfs-ar-btn{
    max-width: 90% !important;
    padding: 10px 14px !important;
    font-size: 11px !important;
    margin-bottom: 8px !important;
  }
}


/* ---------- AR HELPERS ---------- */
/* Default: mobile + tablet show HTML text as-is */
.nfs-ar-helper,
.nfs-ar-helper-2,
.nfs-ar-helper-3{
  margin-top: 2px !important;
  margin-bottom: 2px !important;
  font-size: 12px;
  opacity: .8;
  text-align: center;
}

/* 📱 Mobile & tablet spacing tune */
@media (max-width: 1024px){
  .nfs-ar-helper,
  .nfs-ar-helper-2,
  .nfs-ar-helper-3{
    margin-top: -4px !important;
    margin-bottom: 6px !important;
  }
}

/* 🖥 Desktop: replace helper copy (NO ghost text, NO highlight reveal) */
@media (min-width: 1025px){
  .nfs-ar-helper{
    font-size: 0 !important;
    line-height: 0 !important;
    margin-top: -12px !important;
    margin-bottom: 4px !important;
    text-align: center;
  }

  .nfs-ar-helper::after{
    content: "Prices go up as the frame gets bigger";
    display: block;
    font-size: 11px;
    line-height: 1.2;
    opacity: 0.9;
    color: rgba(255,255,255,0.9);
    margin-top: 8px;
  }
}

/* 📱 Mobile: balance spacing around AR button */
@media (max-width: 1024px){
  #nfs-ar-btn:not([hidden]){
    margin-top: 14px !important;
    margin-bottom: -6px !important;
  }
}

/* 📱 Small iPhones: shrink helper text so it stays one line */
@media (max-width: 400px){
  .nfs-ar-helper,
  .nfs-ar-helper-2,
  .nfs-ar-helper-3{
    font-size: 10px !important;
    letter-spacing: 0.01em;
  }
}

.nfs-ar-helper-2{
  font-weight: 700 !important;
}


/* 🖥 Desktop spacing */
@media (min-width: 1025px){
  .nfs-ar-helper-2,
  .nfs-ar-helper-3{
    margin-bottom: 8px;
    font-size:12px;
  }
}

/* 📱 400px–430px: slightly larger helper text */
@media (min-width: 400px) and (max-width: 430px){
  .nfs-ar-helper,
  .nfs-ar-helper-2,
  .nfs-ar-helper-3{
    font-size: 11px !important;
    letter-spacing: 0.01em;
  }
}



/* =========================================
   ✨ AR Button — White Sheen Sweep Animation
========================================= */

/* Base enhancement */
#nfs-ar-btn{
  position: relative;
  overflow: hidden; /* needed for sweep */
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.15s ease;
}

/* Subtle hover / press feedback */
#nfs-ar-btn:not([hidden]):active{
  transform: scale(0.98);
}

/* Sheen layer */
#nfs-ar-btn::before{
  content: "";
  position: absolute;
  top: -40%;
  left: -120%;
  width: 60%;
  height: 180%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.15) 45%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0.15) 55%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  opacity: 0;
}

/* Run sweep ONLY when visible */
#nfs-ar-btn:not([hidden])::before{
  animation: nfsArSheen 2.2s ease-in-out infinite;
}

/* Sweep animation */
@keyframes nfsArSheen{
  0%{
    left: -120%;
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  50%{
    left: 120%;
    opacity: 1;
  }
  60%{
    opacity: 0;
  }
  100%{
    left: 120%;
    opacity: 0;
  }
}


/* =========================================
   🔮 AR Button — Match "Change Photo" Colour
========================================= */

#nfs-ar-btn:not([hidden]){
  background:
    linear-gradient(
      135deg,
      rgba(90, 210, 255, 0.95),
      rgba(155, 95, 255, 0.95)
    ) !important;

  border: 1px solid rgba(255,255,255,0.6) !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.35) inset,
    0 6px 18px rgba(120, 100, 255, 0.45),
    0 0 28px rgba(80, 200, 255, 0.35) !important;

  color: #0b0b12 !important; /* darker text like Change Photo */
  font-weight: 900;
}

@media (max-width: 1024px){
  #nfs-ar-btn:not([hidden]){
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.35) inset,
      0 4px 14px rgba(120, 100, 255, 0.35),
      0 0 18px rgba(80, 200, 255, 0.25) !important;
  }
}

@media (max-width: 1024px){
  #nfs-ar-btn:not([hidden]){
    width: 100% !important;
    max-width: none !important;
  }
}

/* Hide AR button on Samsung / Android */
.is-not-ios #nfs-ar-btn {
  display: none !important;
}


#neon-frame-product-section .nfs-ar-btn.nfs-ar-btn--simple {
  margin-top: 0 !important;
}


#neon-frame-product-section .nfs-ar-btn.nfs-ar-btn--simple {
  margin-bottom: 18px!important;
}





/* =========================================
/* =========================================
  FULL SCREEN CSS RIGHT HERE - COMPLETE 5TH OF FEB 2026
========================================= */
/* =========================================



/* Change Photo — Primary Neon Action */
.nfs-fullscreen-toggle{
  margin-top: 4px;
  margin-bottom: 2px;
  background: linear-gradient(90deg, #32f0ff, #b82bff) !important;
  color: #0b0b12 !important;
  font-weight: 700 !important;   /* bolder text */
  border: 1.5px solid #ffffff !important;
  outline: none !important;
  background-clip: padding-box !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black) !important;

  
}

/* Center text inside Go Full Screen button */
.nfs-fullscreen-toggle{
  justify-content: center;
  text-align: center;
}


/* GO FULL SCREEN — WIDTH CONTROL (PHONES ONLY) */

/* large phones (Plus / Pro Max) */
@media (min-width: 430px) and (max-width: 798px){
  .nfs-fullscreen-toggle{
    width: 66vw;
  }
}

/* small phones (Plus / Pro Max) */
@media (max-width: 430px){
  .nfs-fullscreen-toggle{
    width: 66vw;
  }
}



/* ================================
   NEON PULSE ANIMATION — FULL BLOCK
================================ */

@keyframes nfsNeonPulse {
  0% {
    box-shadow: 0 0 6px rgba(50,240,255,0.4), 0 0 10px rgba(184,43,255,0.3);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 14px rgba(50,240,255,0.8), 0 0 22px rgba(184,43,255,0.6);
    transform: scale(1.03);
  }
  100% {
    box-shadow: 0 0 6px rgba(50,240,255,0.4), 0 0 10px rgba(184,43,255,0.3);
    transform: scale(1);
  }
}

/* ✅ THIS is the actual class applying it */
.nfs-fullscreen-toggle {
  animation: nfsNeonPulse 3s ease-in-out infinite;
  transition: transform 0.2s ease;
}


/* ================================
   SOFT + VISIBLE WHITE SHEEN
================================ */

.nfs-fullscreen-toggle{
  position: relative;
  overflow: hidden;
}

.nfs-fullscreen-toggle::after{
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 150%;
  height: 100%;

  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.25) 40%,
    rgba(255,255,255,0.45) 50%,
    rgba(255,255,255,0.25) 60%,
    transparent 100%
  );

  transform: skewX(-18deg);
  filter: blur(6px); /* 👈 THIS makes it soft */
  pointer-events: none;

  animation: nfsSheenSweep 5s ease-in-out infinite;
}

@keyframes nfsSheenSweep {
  0% {
    left: -150%;
  }
  50% {
    left: 150%;
  }
  100% {
    left: -150%;
  }
}







/* =========================================================
   SMALL PHONE WIDTH TUNER — NFS CANVAS BUTTONS
   Adjust ONLY the 3 variables below.
   ========================================================= */

@media (max-width: 420px){

  /* ---- TUNERS (change these numbers) ---- */
  :root{
    --nfs-fs-btn-w: 70vw;      /* Go Full Screen width on small phones */
    --nfs-toggle-btn-w: 34vw;  /* Draw Assist + Light Switch width */
    --nfs-toggle-gap: 8px;     /* gap between Draw Assist + Light Switch */
  }

  /* Make wrappers behave predictably */
  .nfs-canvas-tools{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: var(--nfs-toggle-gap) !important;
    flex-wrap: nowrap !important;
  }

  .nfs-canvas-tools--fullscreen{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  

  #nfs-assisted-toggle,
  #nfs-lights-toggle{
    width: var(--nfs-toggle-btn-w) !important;
    max-width: var(--nfs-toggle-btn-w) !important;
    flex: 0 0 var(--nfs-toggle-btn-w) !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important; /* prevents wrapping making them look “wide” */
  }
}


/* =====================================================
   NFS — MOBILE FULLSCREEN CANVAS (PHONE ONLY)
   ===================================================== */

#nfs-fs-overlay{
  position: fixed;
  inset: 0 0 0px 0; /* trims 2px from bottom */
  z-index: 999999;
  background: rgba(0,0,0,0.92);
  display: none;
  flex-direction: column;
}

#nfs-fs-overlay[aria-hidden="false"]{
  display: flex;
}

#nfs-fs-toolbar{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: rgba(10,10,16,0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

#nfs-fs-toolbar .nfs-fs-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

#nfs-fs-toolbar .nfs-fs-btn:active{
  transform: scale(0.985);
}


#nfs-fs-toolbar .nfs-fs-group{
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

#nfs-fs-toolbar input[type="range"]{
  width: 120px;
}

#nfs-fs-toolbar input[type="color"]{
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  background: transparent;
}

#nfs-fs-canvas-host{
  flex: 1;
  min-height: 0;

  /* REMOVE side padding that creates black frame */
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom);

  display: flex;
  align-items: center;
  justify-content: center;
}

#nfs-fs-canvas-host .nfs-canvas-wrapper{
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100%;
}

#nfs-fs-canvas-host .nfs-zoom-layer{
  width: 100%;
  height: 100%;
}


#nfs-fs-clear,
#nfs-fs-undo{
  border: 2px solid rgba(255,255,255,0.50) !important;
  background: transparent !important;
}


#nfs-fs-close{
  border-color: rgba(255,90,90,0.75) !important;
  color: #ffb3b3 !important;
}

#nfs-fs-close:active{
  background: rgba(255,90,90,0.15) !important;
}




/* =========================
   FULLSCREEN COLOR SWATCH OUTLINE
   ========================= */
#nfs-fs-brush-color{
  border: 1.5px solid rgba(255,255,255,0.55) !important;
  border-radius: 12px;
  background: transparent;
}


/* =========================
   FULLSCREEN BRUSH CONTROLS — SMOOTH GROUP BORDER
   ========================= */
#nfs-fs-toolbar .nfs-fs-group{
  display: flex;
  align-items: center;
 

  padding: 1px 1px;
  border-radius: 14px;

  border: 1.5px solid rgba(255,255,255,0.60);
  background: rgba(255,255,255,0.04);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}



/* =========================================
   FULLSCREEN TOOLBAR — SMALL PHONE COMPACT MODE
   ========================================= */
@media (max-width: 420px){

  /* Buttons: Clear / Undo / X */
  #nfs-fs-toolbar .nfs-fs-btn{
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
    border-radius: 10px;
  }

  /* Size label */
  .nfs-fs-size-label{
    font-size: 11px;
    margin-right: 4px;
  }

  /* Brush slider */
  #nfs-fs-toolbar #nfs-fs-brush-size{
    width: 80px;      /* shorter track */
    min-width: 70px;
  }

  /* Color swatch */
  #nfs-fs-toolbar #nfs-fs-brush-color{
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

}


/* Add space after the X button */
#nfs-fs-close{
  margin-right: 10px;
}


/* Make "Size" label white in fullscreen */
#nfs-fs-toolbar .nfs-fs-size-label{
  color: #ffffff !important;
}


/* Space "Size" away from the group border */
#nfs-fs-toolbar .nfs-fs-size-label{
  margin-left: 2px;
}


/* Hide Full Screen button on desktop */
@media (min-width: 769px){
  .nfs-fullscreen-toggle,
  #nfs-fullscreen-btn{
    display: none !important;
  }
}




/* =====================================================
   FULLSCREEN DISCLAIMER — TOP OF CANVAS
   ===================================================== */

.nfs-fs-disclaimer{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(70px + env(safe-area-inset-top));
  bottom: auto;

  /* allow it to breathe */
  width: min(92vw, 420px);

  padding: 10px 14px;

  font-size: 10px;
  line-height: 1.35;
  text-align: center;
  letter-spacing: 0.01em;

  color: rgba(255,255,255,0.96);

  /* still “pill-like” but not cramped */
  border-radius: 18px;

  /* glass */
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  border: 1px solid rgba(255,255,255,0.22);

  box-shadow:
    0 10px 28px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.18);

  pointer-events: none;
  z-index: 10;
}

.nfs-fs-disclaimer{
  color: rgba(255,255,255,0.98);

  text-shadow:
    0 1px 2px rgba(0,0,0,0.9),
    0 2px 10px rgba(0,0,0,0.8);
}

/* Fullscreen disclaimer — base (default) */
.nfs-fs-disclaimer {
  font-size: 9px;
  line-height: 1.35;
  padding: 8px 12px;
  max-width: 92%;
  margin: 0 auto;
  text-align: center;
  opacity: 0.9;
}

/* Small phones (iPhone SE / mini / narrow Android) */
@media (max-width: 375px) {
  .nfs-fs-disclaimer {
    font-size: 9px;
    line-height: 1.25;
    padding: 6px 10px;
    max-width: 94%;
    opacity: 0.85;
  }
}

/* Very small / edge cases */
@media (max-width: 340px) {
  .nfs-fs-disclaimer {
    font-size: 9px;
    line-height: 1.2;
    padding: 5px 8px;
  }
}






/* =====================================================
   NFS FULLSCREEN — EXPAND IN PHOTO DIRECTION (NO STRETCH)
   ===================================================== */

#nfs-fs-canvas-host{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* We set --nfs-fs-ar from JS:
   Landscape (ar>1) becomes wider, Portrait (ar<1) becomes taller */
#nfs-fs-canvas-host .nfs-canvas-wrapper{
  width: min(90vw, calc(90vh * var(--nfs-fs-ar, 1))) !important;
  height: min(90vh, calc(90vw / var(--nfs-fs-ar, 1))) !important;
}


/* Keep your inner layers filling the wrapper (prevents breaking interactions) */
#nfs-fs-canvas-host .nfs-zoom-layer{
  width:100% !important;
  height:100% !important;
}










/* NFS Shipping Protection (cart) */
.nfs-protect{
  margin: 10px 0 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(154,108,255,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;
}

.nfs-protect__row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
}

.nfs-protect__check{
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: #6f2bff;
  flex: 0 0 auto;
}

.nfs-protect__txt{
  flex: 1 1 auto;
  color: rgba(255,255,255,.92);
}

.nfs-protect__tag{
  font-weight: 600;
  color: rgba(255,255,255,.65);
}

.nfs-protect__sub{
  display:block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255,255,255,.70);
}

.nfs-protect__price{
  flex: 0 0 auto;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  padding-left: 8px;
  white-space: nowrap;
}

.nfs-protect__fine{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.60);
}

@media (max-width: 375px){
  .nfs-protect{ padding: 9px 10px; }
  .nfs-protect__sub{ font-size: 10px !important; }
  .nfs-protect__price{ font-size: 13px; }
}


@media (max-width: 430px) {
  .nfs-protect__tag {
    font-size: 0.76em;
    opacity: 0.7;
    margin-left: 2px;
  }

  .nfs-protect__txt {
    font-size: 0.78em;
    
    margin-left: 2px;
  }

  .nfs-protect__sub {
    font-size: 0.97em;
    opacity: 0.7;
    
  }
}


@media (min-width: 431px) and (max-width: 500px) {
  .nfs-protect__tag {
    font-size: 0.90em;
    opacity: 0.75;
    margin-left: 3px;
  }

  .nfs-protect__txt {
    font-size: 0.95em;
    opacity: 0.75;
    margin-left: 3px;
  }

  .nfs-protect__sub {
    font-size: 1em;
    opacity: 0.75;
  }
}






/* If description is inside the flex heading, force it to the next line */
.cart-item__heading{
  flex-wrap: wrap;
}

.cart-item__desc{
  flex: 0 0 100%;
  width: 100%;
  order: 99;          /* pushes it after title */
  margin-top: 2px;
}







.nfs-orb__price,
.nfs-orb__price * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}






.nfs-currency-note-2 {
margin-top: 12px;
}


.nfs-price-reassurance {
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.25px;
  line-height: 1.15;        /* THIS removes the gap feeling */
  color: rgba(180,160,255,0.95);
}

.nfs-price-reassurance--sub {
           /* tiny gap, intentional */
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 1.15;
  color: rgba(180,160,255,0.75) !important;
}


.nfs-price-reassurance,
.nfs-price-reassurance--sub{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.05 !important;
  color: rgba(180,160,255,0.85);
}


.nfs-price-reassurance-group{
  display: block;
  margin-top: 2px;
}
.nfs-price-reassurance-group > *{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.05 !important;
}
.nfs-price-reassurance--sub{
  margin-top: 4px !important;
      margin-bottom: 6px !important;
  text-align: center;
}


@media (max-width: 390px){
  .nfs-price-reassurance--sub{
    font-size: 10px;
    letter-spacing: 0.15px;
  }
}


@media (min-width: 768px){
  .nfs-price-reassurance--sub{
    font-size: 13.5px;
    font-weight: 400; /* 👈 change from 300 */
    letter-spacing: 0.25px;
    opacity: 1; /* 👈 remove the faded look */
  }
}





/* NFS Price reassurance — smoother premium reveal */
.nfs-price-reassurance-group{
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition:
    opacity .75s cubic-bezier(.2,.9,.2,1),
    transform .75s cubic-bezier(.2,.9,.2,1),
    filter .75s cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform, filter;
}

/* revealed */
.nfs-price-reassurance-group.is-visible{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* child stagger (feels luxe) */
.nfs-price-reassurance,
.nfs-price-reassurance--sub{
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity .7s cubic-bezier(.2,.9,.2,1),
    transform .7s cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
}

.nfs-price-reassurance-group.is-visible .nfs-price-reassurance{
  opacity: 1;
  transform: translateY(0);
  transition-delay: .06s;
}

.nfs-price-reassurance-group.is-visible .nfs-price-reassurance--sub{
  opacity: 1;
  transform: translateY(0);
  transition-delay: .16s;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .nfs-price-reassurance-group,
  .nfs-price-reassurance,
  .nfs-price-reassurance--sub{
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* NFS Price reassurance — collapsed by default (no layout gap) */
.nfs-price-reassurance-group{
  max-height: 0;          /* ✅ takes up no space */
  overflow: hidden;       /* ✅ hide content while collapsed */
  margin-top: 0;          /* ✅ no gap under price pill */
  padding-top: 0;
  pointer-events: none;   /* ✅ avoid accidental taps */
}

/* revealed: expands and creates space */
.nfs-price-reassurance-group.is-visible{
  max-height: 80px;       /* enough for 2 lines */
  margin-top: 6px;        /* creates the spacing only when shown */
  pointer-events: auto;
}



.nfs-ai-limit-msg{
  text-align:center;
}

.nfs-ai-limit-help{
  margin-top:6px;
  font-size:0.95em;
  opacity:0.9;
}

.nfs-ai-limit-h



.nfsCB-aiToastMsg{
  text-align:center;
}

.nfsCB-aiToastHelp{
  margin-top:6px;
  font-size:0.95em;
  opacity:0.9;
}

.nfsCB-aiToastHelp a{
  color:#b58cff;
  text-decoration:underline;
}



@media (max-width: 390px){
  .nfs-subheading{
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
}






@media (max-width: 768px){

  .proof-factor-fw-triggers-floatbutton {
    transform: scale(0.75) !important;
    transform-origin: bottom left !important;
  }

}




.footer-newsletter{ max-width:420px; }
.footer-newsletter__heading{ margin:0 0 8px; font-weight:900; }
.footer-newsletter__sub{ margin:0 0 14px; opacity:.75; font-size:14px; }

.footer-newsletter__form{
  display:flex;
  gap:10px;
  align-items:center;
}

.footer-newsletter__input{
  flex:1;
  height:44px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.22);
  color:#fff;
  box-sizing:border-box;
}

.footer-newsletter__btn{
  height:44px;
  padding:0 14px;
  border-radius:12px;
  border:0;
  background:#6F2BFF;
  color:#fff;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}

@media (max-width: 767px){
  .footer-newsletter__form{ flex-direction:column; align-items:stretch; }
  .footer-newsletter__btn{ width:100%; }
}


/* Desktop only */
@media (min-width: 992px){

  .footer-newsletter__heading{
    font-size: 28px;        /* adjust size here */
    white-space: nowrap;    /* force single line */
    max-width: none;        /* remove previous width constraint */
  }

}



.footer-newsletter__success{
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #6F2BFF;
}



.header-menu-main__list a {
  font-size: 10.5px !important;
}


.nfs-upload-link{
  text-decoration: none;
  font-weight: 600;
  text-decoration: underline;

}

.nfs-upload-link:hover{
  text-decoration: underline;
  opacity: 0.85;
}


.nfs-upload-link{
  color: #ff4b4b;       /* 👈 your red */
}




.nfs-cart-reassurance {
  text-align: center;
}




/* Z FLIP css */ /* Z FLIP CSS */ /* Z FLIP CSS */ 

/* STEP 1 EDITOR (sHOP READY MADE LINE */ 


@media (max-width: 420px){
  html body #nfs-upload-gate .nfs-upload-hint{
    font-size: 0.75rem !important;
    letter-spacing: -0.01em !important;
    line-height: 1.15 !important;
  }
}



/* CREATE IMAGE WITH TEXT OR TRANSFORM PMY PHOTO */ 






@media (max-width: 420px){
  #neon-frame-product-section .nfs-heading.nfs-step2-heading{
    font-size: 13px !important;
    line-height: 1 !important;
  }
}










.nfs-video-pilllink{
  --nfs-accent: #6F2BFF;

  display:flex;
  align-items:center;
  gap:12px;

  width: min(520px, 100%);
    margin: 0 auto;   /* 👈 THIS CENTERS IT */
  padding: 12px 14px;
  border-radius: 999px;

  border: 1px solid rgba(255,45,45,.95);
  background: linear-gradient(180deg, rgba(18,14,28,.78), rgba(10,8,16,.72));
  color: rgba(255,255,255,.95);

  cursor:pointer;
  text-align:left;

  box-shadow:
  0 10px 28px rgba(0,0,0,.35),
  0 0 28px rgba(255,45,45,.18);

  transition: transform .15s ease, border-color .15s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}

/* left badge */
.nfs-video-pilllink__badge{
  width: 40px;
  height: 40px;
  border-radius: 999px;

  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 40% 35%, rgba(255,45,45,.65), rgba(255,45,45,.18) 55%, rgba(255,45,45,0) 72%),
    rgba(0,0,0,.25);

  border: 1px solid rgba(255,45,45,.65);
  box-shadow:
    0 0 18px rgba(255,45,45,.45),
    0 0 0 1px rgba(255,255,255,.06) inset;

  display:flex;
  align-items:center;
  justify-content:center;

  flex: 0 0 auto;
}

/* play triangle */
.nfs-video-pilllink__tri{
  width: 0;
  height: 0;
  margin-left: 2px;
  border-left: 10px solid rgba(255,255,255,.95);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

.nfs-video-pilllink__copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width: 0;
}

.nfs-video-pilllink__title{
  font: 900 12.5px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nfs-video-pilllink__meta{
  font: 650 11px/1.15 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgba(255,255,255,.68);
}

/* right chevron */
.nfs-video-pilllink__chev{
  margin-left: auto;
  font: 900 18px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgba(255,255,255,.55);
  transform: translateX(0);
  transition: transform .2s ease, color .2s ease;
}

/* hover / focus */
.nfs-video-pilllink:hover{
  transform: translateY(-1px);
  border-color: rgba(111,43,255,.45);
  box-shadow:
    0 14px 36px rgba(0,0,0,.45),
    0 0 32px rgba(111,43,255,.16),
    0 0 0 1px rgba(255,255,255,.05) inset;
}
.nfs-video-pilllink:hover .nfs-video-pilllink__chev{
  transform: translateX(3px);
  color: rgba(255,255,255,.75);
}

.nfs-video-pilllink:active{
  transform: translateY(0) scale(.99);
}

.nfs-video-pilllink:focus-visible{
  outline: 2px solid rgba(111,43,255,.8);
  outline-offset: 3px;
}

/* small phones */
@media (max-width: 420px){
  .nfs-video-pilllink{
    padding: 11px 12px;
    gap: 10px;
  }
  .nfs-video-pilllink__badge{
    width: 36px;
    height: 36px;
  }
  .nfs-video-pilllink__title{ font-size: 12px; }
  .nfs-video-pilllink__meta{ font-size: 10px; }
}

.nfs-video-pilllink{
  position: relative;
  overflow: hidden;
}

.nfs-video-pilllink::after{
  content:"";
  position:absolute;
  top:0;
  left:-60%;
  width:60%;
  height:100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.12),
    transparent
  );
  transition: left .6s ease;
}

.nfs-video-pilllink:hover::after{
  left:120%;
}






/* NFS Tip video link — hard isolated (kills theme button styling + pseudo elements) */
.nfs-info-box button.nfs-tip-video-link-x9{
  all: unset !important;
  -webkit-appearance: none !important;
  appearance: none !important;

  display: inline !important;
  cursor: pointer !important;

  font: inherit !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  line-height: inherit !important;

  color: #ff4b4b !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;

  margin-left: 6px !important;

  /* kill bounce sources */
  transform: none !important;
  transition: none !important;
  animation: none !important;

  /* kill button visuals */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;

  position: static !important;
  vertical-align: baseline !important;
}

/* kill the theme's decorative pseudo elements (the dashed pill / dot) */
.nfs-info-box button.nfs-tip-video-link-x9::before,
.nfs-info-box button.nfs-tip-video-link-x9::after{
  content: none !important;
  display: none !important;
}

/* kill hover/active/focus motion */
.nfs-info-box button.nfs-tip-video-link-x9:hover,
.nfs-info-box button.nfs-tip-video-link-x9:active,
.nfs-info-box button.nfs-tip-video-link-x9:focus,
.nfs-info-box button.nfs-tip-video-link-x9:focus-visible{
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
  outline: none !important;
}






.nfs-s1-watch-raw{
  all: initial; /* wipes inheritance */
  display: inline;
  cursor: pointer;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;

  color: #ff4b4b;
  text-decoration: underline;
  text-underline-offset: 3px;

  margin-left: 4px;

  -webkit-tap-highlight-color: transparent;
}

/* kill any theme pseudo stuff */
.nfs-s1-watch-raw::before,
.nfs-s1-watch-raw::after{
  content: none !important;
  display: none !important;
}

/* no motion / no bounce */
.nfs-s1-watch-raw:hover,
.nfs-s1-watch-raw:active,
.nfs-s1-watch-raw:focus{
  transform: none !important;
  transition: none !important;
  animation: none !important;
  box-shadow: none !important;
  outline: none !important;
  opacity: .85;
}





@media (max-width: 430px){
  #nfs-browse{
    width: 100% !important;
    max-width: none !important;
  }
}


@media (max-width: 430px){
  #nfs-demo-cars-btn{
    width: 100% !important;
    max-width: none !important;
  }
}




@media (min-width: 1024px){
  .nfs-subheading{
    font-size: 14px;
  }

  .nfs-demo-hint{
    font-size: 14px !important;
  }

  .nfs-upload-hint{
    font-size: 14px;
  }

  .nfs-s1-watch-raw{
    font-size: 14px;
  }
}





.nfs-tip-video-faq{
  all: initial; /* wipes inheritance */
  display: inline;
  cursor: pointer;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;

  color: #ff4b4b;
  text-decoration: underline;
  text-underline-offset: 3px;

  margin-left: 4px;

  -webkit-tap-highlight-color: transparent;
}



.nfs-info-box .nfs-tip-video-link-x9{
  
  display: inline;
  cursor: pointer;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;

  color: #ff4b4b;
  text-decoration: underline;
  text-underline-offset: 3px;

  margin-left: 6px;
  -webkit-tap-highlight-color: transparent;
}

.nfs-info-box .nfs-tip-video-link-x9:hover{ opacity: .85; }

.nfs-info-box .nfs-tip-video-link-x9::before,
.nfs-info-box .nfs-tip-video-link-x9::after{
  content:none !important;
  display:none !important;
}








/* make the wrapper a real hover target (same size as button, plus bridge) */
#nfs-editor .nfs-info-wrap--step2{
  display: inline-block;
}

/* ✅ Hover bridge to remove the dead gap */
#nfs-editor .nfs-info-wrap--step2::before{
  content:"";
  position:absolute;
  left:-12px;
  right:-12px;
  top:100%;
  height:14px;           /* covers the gap between icon and panel */
  background: transparent;
}

/* Panel position: anchor to the button, not a hard-coded 46px */
#nfs-editor .nfs-info-wrap--step2 .nfs-info-box{
  position:absolute;
  right:0;
  top: calc(100% + 8px); /* <— no more random 46px */
  width:min(460px, 88vw);
  padding:12px 12px;
  border-radius:14px;
  background: rgb(43,36,36);
  border:1px solid rgba(0,0,0,0.4);
  box-shadow: 0 4px 10px rgba(27,113,224,0.63);

  opacity:0;
  visibility:hidden;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
  pointer-events:none;
}

/* Open state (hover OR is-open OR keyboard focus) */
#nfs-editor .nfs-info-wrap--step2.is-open .nfs-info-box{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events:auto;
}

/* Desktop hover only */
@media (hover:hover) and (pointer:fine){
  #nfs-editor .nfs-info-wrap--step2:hover .nfs-info-box{
    opacity:1;
    visibility:visible;
    transform: translateY(0);
    pointer-events:auto;
  }
}

/* arrow aligns to new top */
#nfs-editor .nfs-info-wrap--step2 .nfs-info-box::after{
  content:"";
  position:absolute;
  right:12px;
  top:-8px;
  width:14px;
  height:14px;
  transform: rotate(45deg);
  background: rgb(43,36,36);
  border-left: 1px solid rgba(255,255,255,0.14);
  border-top: 1px solid rgba(255,255,255,0.14);
}








/* =========================================
   FIX v2: Keep orb dropdown below menu drawer
   (No forced position:fixed on theme elements)
========================================= */

/* The real problem: dropdown panel z-index was huge */
.nfs-dd__panel{
  z-index: 20 !important;
}

/* Keep the orb UI low-ish */
.nfs-orb,
.nfs-orb__label,
.nfs-orb__sublabel,
.nfs-dd__btn{
  position: relative;
  z-index: 1 !important;
}

/* Put the drawer/menu above the page without breaking its positioning */
.menu-drawer,
.drawer,
.header__drawer,
#Details-menu-drawer-container,
#Details-menu-drawer-container .menu-drawer{
  z-index: 999999 !important;
}

/* Make sure the overlay is clickable and doesn't “eat” hover states weirdly */
.menu-drawer__overlay,
.drawer__overlay{
  z-index: 999998 !important;
  pointer-events: auto !important;
}

/* If your theme expects pointer cursor on menu items, force it */
.menu-drawer a,
.menu-drawer button,
.drawer a,
.drawer button{
  cursor: pointer !important;
}






.nfs-watch-orb{
  all: initial; /* wipes inheritance */
  display: inline;
  cursor: pointer;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;

  color: #ff4b4b;
  text-decoration: underline;
  text-underline-offset: 3px;

  margin-left: 4px;
  margin-top: 4px;

  -webkit-tap-highlight-color: transparent;
}





/* =========================================================
   NFS — Prevent super-tall uploads (Snapchat portrait)
   Mobile-first clamp (no JS changes)
   ========================================================= */
@media (max-width: 768px){
  #nfs-editor{
    overflow: hidden; /* stops weird scroll/push */
  }

  #nfs-canvas-wrapper{
    /* cap how tall the editor can get on phones */
    max-height: 72vh;
    /* optional: keeps it centered if it gets capped */
    margin-left: auto;
    margin-right: auto;
  }
}

/* If you use fullscreen overlay, don't cap it there */
html.nfs-fs-open #nfs-canvas-wrapper{
  max-height: none !important;
}



/* ✅ Step 2: ensure the info button stays tappable above the tooltip */
#nfs-editor .nfs-info-wrap--step2 .nfs-info-btn{
  position: relative;
  z-index: 5000;
}

#nfs-editor .nfs-info-wrap--step2 .nfs-info-box{
  position: absolute;
  z-index: 1000;
}


.nfs-info-wrap{
margin-bottom:20px;
}


/* ✅ Hide Compare button in cart (desktop + mobile) */
.nfs-cart-compare-below{
  display: none !important;
}





/* Step 2 wrapper */
.nfs-step2-wrap{
  position:relative;
  border-radius:24px;
  overflow:hidden;
}

/* Soft blur overlay */
.nfs-step2-wrap:has(#nfs-editor.nfs-designer--disabled)::after{
  content:"";
  position:absolute;
  inset:0;
  display:block;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  pointer-events:none;
  z-index:999;
}

/* Floating message card */
.nfs-step2-wrap:has(#nfs-editor.nfs-designer--disabled)::before{
  content:"⬆ Upload a photo above to start designing";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:1000;
  pointer-events:none;

  display:block;
  width:min(420px, calc(100% - 60px));
  padding:12px 18px;

  text-align:center;
  line-height:1.3;
  font-size:15px;
  font-weight:600;
  color:#fff;

  background:rgba(20,20,30,.85);
  border:1px solid rgba(255,255,255,.72);
  border-radius:14px;

  box-shadow:
    0 8px 28px rgba(0,0,0,.35),
    0 0 14px rgba(111,43,255,.25); /* subtle neon glow */
}

/* Locked editor look */
.nfs-step2-wrap:has(#nfs-editor.nfs-designer--disabled) #nfs-editor{
  filter:grayscale(.6) blur(2px);
}

/* Phone */
@media (max-width:768px){

  .nfs-step2-wrap:has(#nfs-editor.nfs-designer--disabled)::before{
    width:min(92%, 300px);
    padding:10px 14px;

    font-size:13px;
    line-height:1.25;
    border-radius:20px;
  }

}

































/* SIMPLE DESIGNER */ /* SIMPLE DESIGNER */ /* SIMPLE DESIGNER */ /* SIMPLE DESIGNER */ 





/* SIMPLE DESIGNER */ 


.nfs-simple-page{
  padding-top: 30px;
}



.is-hidden{
  display:none !important;
}

.nfs-simple-file-input{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.nfs-simple-progress{
  width:min(280px, 82vw);
  height:10px;
  margin:14px auto 0;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.80);
  border-radius:999px;
  overflow:hidden;
  position:relative;
}

.nfs-simple-progress-bar{
  width:0%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #6f2bff 0%, #9f6bff 100%);
  transition:width 280ms ease;
}

.nfs-simple-progress-text{
  margin-top:10px;
  font-size:13px;
  line-height:1.2;
  opacity:0.82;
  text-align:center;
}

.nfs-simple-processing-title{
  min-height:24px;
  text-align:center;
  margin-bottom:10px;
}


.nfs-simple-scope.nfs-simple-upload-state {
  padding-top: 28px;
}

.nfs-simple-scope.nfs-simple-upload-state {
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
}

.nfs-simple-scope.nfs-upload-card{
  min-height: 380px;
}

#neon-frame-product-section .nfs-upload-card:has(#nfs-simple-options:not(.is-hidden)){
  min-height: 720px !important;
}


.nfs-simple-scope.nfsUploadProof{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  text-align: center;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;

  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border: 1px solid rgba(154,108,255,.30);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 18px rgba(154,108,255,.14),
    0 10px 26px rgba(0,0,0,.22);
}

.nfs-simple-scope .nfsUploadProof__stars{
  font-size: 12px;
  line-height: 1;
  letter-spacing: 2px;
  color: #f5c77a;
  text-shadow:
    0 0 6px rgba(245,199,122,.35),
    0 0 12px rgba(245,199,122,.18);
  margin-bottom: 4px;
}

.nfs-simple-scope .nfsUploadProof__line{
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255,255,255,.78);
  margin-bottom: 6px;
}

.nfs-simple-scope .nfsUploadProof__quote{
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255,255,255,.94);
  min-height: 36px;
  transition: opacity .25s ease;
  will-change: opacity;
}

.nfs-simple-scope .nfsUploadProof__meta{
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255,255,255,.66);
  margin-top: 4px;
  min-height: 18px;
  transition: opacity .25s ease;
  will-change: opacity;
}

@media (max-width: 480px){
  .nfs-simple-scope.nfsUploadProof{
    max-width: 320px;
    padding: 10px 10px;
  }

  .nfs-simple-scope .nfsUploadProof__quote{
    min-height: 42px;
  }
}


/* 5 star reviews here*/ 


.nfs-simple-scope.nfsUploadProof{
  margin-top: 40px;
}


.nfs-simple-scope.nfs-simple-upload-state{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nfs-simple-scope.nfs-browse-btn{
  width: 320px !important;
  max-width: 320px !important;
  min-width: 320px !important;
  box-sizing: border-box;
  flex: 0 0 auto;
}

.nfs-simple-scope.nfsUploadProof{
  width: 360px !important;
  max-width: 360px !important;
  min-height: 92px;
  box-sizing: border-box;
}





/* Remove dashed ring from SIMPLE funnel dropdown buttons only */
#neon-frame-product-section #nfs-simple-options .nfs-dd__btn::after,
#neon-frame-product-section #nfs-simple-options .nfs-dd__btn::before {
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}

/* Keep dropdown trigger clean */
#neon-frame-product-section #nfs-simple-options .nfs-dd__btn {
  box-shadow: none !important;
  filter: none !important;
}




/* =========================
   SIMPLE FUNNEL DROPDOWN PANEL FIX
   ========================= */

#neon-frame-product-section #nfs-simple-options .nfs-dd{
  position: relative !important;
}

#neon-frame-product-section #nfs-simple-options .nfs-dd__panel{
  position: absolute !important;
  top: calc(100% + 2px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;

  display: none !important;
  flex-direction: column !important;
  gap: 6px !important;

  padding: 8px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.60) !important;
  background: #151321 !important;
  box-shadow: 0 20px 40px rgba(0,0,0,.35) !important;

  z-index: 9999 !important;
  overflow: hidden !important;
}

#neon-frame-product-section #nfs-simple-options .nfs-dd.is-open .nfs-dd__panel{
  display: flex !important;
}

/* option buttons inside the panel */
#neon-frame-product-section #nfs-simple-options .nfs-dd__option{
  display: block !important;
  width: 100% !important;
  min-height: auto !important;
  margin: 0 !important;
  padding: 12px 14px !important;

  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #fff !important;

  text-align: left !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  white-space: normal !important;

  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}

@media (max-width: 360px){

  #neon-frame-product-section #nfs-simple-options .nfs-dd__option{
    font-size: 10px !important;
  }

}

/* default */
#neon-frame-product-section #nfs-simple-options .nfs-dd__value{
  font-size: 11px;
}


/* small phones */
@media (min-width: 320px) and (max-width: 340px){
  #neon-frame-product-section #nfs-simple-options .nfs-dd__value{
    font-size: 9px !important;
  }
}


/* small phones */
@media (min-width: 351px) and (max-width: 370px){
  #neon-frame-product-section #nfs-simple-options .nfs-dd__value{
    font-size: 10px !important;
  }
}

/* kill global upload-gate button decorations on option rows */
#neon-frame-product-section #nfs-simple-options .nfs-dd__option::before,
#neon-frame-product-section #nfs-simple-options .nfs-dd__option::after{
  content: none !important;
  display: none !important;
}

/* hover/selected */
#neon-frame-product-section #nfs-simple-options .nfs-dd__option:hover{
  background: rgba(255,255,255,.08) !important;
}

#neon-frame-product-section #nfs-simple-options .nfs-dd__option.is-selected{
  background: rgba(111,43,255,.18) !important;
}

/* keep surrounding wrappers from clipping menu */
#neon-frame-product-section,
#neon-frame-product-section .nfs-simple-options,
#neon-frame-product-section .nfs-simple-variant-grid,
#neon-frame-product-section .nfs-tool-group{
  overflow: visible !important;
}









#neon-frame-product-section #nfs-simple-options{
  padding-top: 25px;
}


#neon-frame-product-section .nfs-simple-footer{
  margin-top: 30px;
}


#neon-frame-product-section #nfs-add-to-cart{
  background: linear-gradient(180deg,#8a5cff,#6f2bff);
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.25),
    0 10px 25px rgba(111,43,255,0.45);
}


#neon-frame-product-section .nfs-simple-preview-wrap{
  border-radius: 24px;
  overflow: hidden;
  border: 2.5px solid #000;
}

#neon-frame-product-section #nfs-simple-result-preview{
  display:block;
  width:100%;
}



#neon-frame-product-section .nfs-tool-group.nfs-tool-group--select::after{
  content: none !important;
  display: none !important;
}



#neon-frame-product-section .nfs-power-note{
  font-size:12px;
  margin-bottom:2px;
  opacity:.7;
  line-height:1.3;
}



#neon-frame-product-section .nfs-simple-price-wrap{
  display:flex;
  justify-content:center;
  margin-top:6px;
  margin-bottom:14px;
}

#neon-frame-product-section .nfs-simple-price-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:20px;

  padding:10px 20px;
  border-radius:999px;

  font-size:16px;
  font-weight:700;
  line-height:1;

  color:#fff;

  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.78);

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 6px 16px rgba(0,0,0,0.25);
}



#neon-frame-product-section .nfs-simple-price-wrap{
  margin-top: 18px !important;
}



#neon-frame-product-section button.nfs-change-photo-x{
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  text-shadow: none !important;
  text-decoration: underline !important;

  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 auto 12px !important;
  border-radius: 0 !important;

  color: #aeb7c9 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  font-family: inherit !important;

  cursor: pointer !important;
}

#neon-frame-product-section button.nfs-change-photo-x::before,
#neon-frame-product-section button.nfs-change-photo-x::after{
  content: none !important;
  display: none !important;
}



#neon-frame-product-section button.nfs-change-photo-x{
  -webkit-appearance: none !important;
  appearance: none !important;
  background: rgba(255,255,255,0.06) !important;
  background-image: none !important;
  border: 2px solid rgba(255,255,255,0.74) !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  text-shadow: none !important;
  text-decoration: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 4px 10px !important;
  margin: 0 auto 12px !important;
  border-radius: 999px !important;
  

  color: #d7dced !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  font-family: inherit !important;

  cursor: pointer !important;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.08s ease !important;
}

#neon-frame-product-section button.nfs-change-photo-x:hover{
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.24) !important;
}

#neon-frame-product-section button.nfs-change-photo-x:active{
  transform: scale(0.97) !important;
}

#neon-frame-product-section button.nfs-change-photo-x::before,
#neon-frame-product-section button.nfs-change-photo-x::after{
  content: none !important;
  display: none !important;
}



#neon-frame-product-section .nfs-processing-info,
#neon-frame-product-section .nfs-processing-warning{
  margin-top:18px;
  padding:14px 16px;

  border-radius:14px;

  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.50);

  text-align:center;
  position:relative;
  overflow:hidden;

  animation:nfsProcessingGlow 3.2s ease-in-out infinite;
}

#neon-frame-product-section .nfs-processing-line, 
#neon-frame-product-section .nfs-processing-warning{
  font-size:13px;
  line-height:1.45;
  color:rgba(255,255,255,0.88);
  margin:5px 0;
}

@media (max-width: 430px) {
  #neon-frame-product-section .nfs-processing-line, 
  #neon-frame-product-section .nfs-processing-warning {
    font-size: 11px;
  }
}

#neon-frame-product-section .nfs-processing-line:first-child,
#neon-frame-product-section .nfs-processing-warning{
  font-weight:600;
}

/* soft glow animation */

@keyframes nfsProcessingGlow{

  0%{
    box-shadow:
      0 0 0 rgba(111,43,255,0),
      0 0 0 rgba(111,43,255,0);
  }

  50%{
    box-shadow:
      0 0 14px rgba(111,43,255,0.18),
      0 0 30px rgba(111,43,255,0.12);
  }

  100%{
    box-shadow:
      0 0 0 rgba(111,43,255,0),
      0 0 0 rgba(111,43,255,0);
  }

}





#neon-frame-product-section .nfs-processing-warning{
  margin-top:22px !important;
}






/* Photo examples grid */
.nfs-photo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:10px;
}

.nfs-photo-grid__item{
  text-align:center;
}

.nfs-photo-grid__item img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.65);
}

.nfs-photo-grid__caption{
  margin-top:4px;
  font-size:12px;
  opacity:0.8;
}


.nfs-photo-examples-title{
  margin-top:12px;
}






@media (max-width: 768px){
.nfs-start-note{
  Margin-top: 20px; 
}
}




@media (max-width: 768px){
.nfs-start-note-2{
  Margin-top: 2px;
  margin-bottom:6px;
}
}



@media (min-width: 769px){
  .nfs-start-note{
    margin-top: 20px;
  }
}

@media (min-width: 769px){
  .nfs-start-note-2{
    margin-top: 10px;
    margin-bottom: 14px;
  }
}





@media (max-width: 768px){
.nfs-start-note-2{
  font-size:12px;
}
}


@media (max-width: 768px){
.nfs-start-note{
  font-size:12px;
}
}







/* Small iPhones / narrow phones only */
@media (max-width: 430px){

  #neon-frame-product-section .nfs-upload-card,
  #neon-frame-product-section .nfs-simple-circle-shell,
  #neon-frame-product-section .nfs-simple-upload-state,
  #neon-frame-product-section .nfs-photo-examples,
  #neon-frame-product-section #nfs-simple-options,
  #neon-frame-product-section .nfs-simple-result,
  #neon-frame-product-section .nfs-simple-preview-wrap{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #neon-frame-product-section .nfs-browse-btn,
  #neon-frame-product-section .nfsUploadProof{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #neon-frame-product-section .nfs-photo-grid{
    gap: 8px !important;
  }

  #neon-frame-product-section .nfs-simple-upload-state{
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}




.nfs-photo-examples-title{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;

  font-size:12px;
  font-weight:600;
  line-height:1;

  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.65);
  color:#fff;

  margin-top:20px;

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 4px 10px rgba(0,0,0,0.25);
}



@media (max-width: 430px){
  .nfs-start-note{
    white-space: nowrap;
    font-size:11px;
  }
}

@media (max-width: 430px){
  .nfs-start-note-6{
    white-space: nowrap;
    font-size:12px;
  }
}



/* Kill extra bottom space under simple designer */
#neon-frame-product-section,
#neon-frame-product-section form,
#neon-frame-product-section #neon-frame-app,
#neon-frame-product-section .nfs-upload-card,
#neon-frame-product-section .nfs-simple-circle-shell{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove any section gap above Loox */
#neon-frame-product-section + .shopify-section,
#neon-frame-product-section + .shopify-section .apps-section,
#shopify-section-template-26392793022775__177300906982d04024,
#shopify-section-template-26392793022775__177300906982d04024 .apps-section{
  margin-top: 0 !important;
  padding-top: 0 !important;
}




.nfs-full-designer-link{
  color:#ff3b3b;
  font-weight:200;
  text-decoration:underline;
 
}

.nfs-full-designer-link:hover{
  color:#ff5a5a;
}

.nfs-start-note-bottom{
  margin-top:22px; 
  margin-bottom:22px;

  padding-bottom: 0 !important;
}




.nfs-processed-line{
  margin-top: 4px;
  margin-bottom:14px;
  font-weight: 700 !important;
}



.nfs-processed-line-2{
  margin-top:8px;
  margin-bottom:4px;
}

.nfs-processed-line-3{
  Margin-top: 14px;
  margin-bottom: 2px;

}

.nfs-processed-line-4{
  
  margin-bottom: 6px;
}


.nfs-processed-line-5{
  
  margin-bottom: 3px;
}



.nfs-pricenote-1{
  margin-top:18px;
  font-size: 12px;
}

.nfs-pricenote-2{
  margin-top: 4px;
  font-size:12px;
}


.nfs-preview-led-toggle{
  margin-top:14px;
  display:flex;
  justify-content:center;
}

.nfs-preview-led-toggle.is-hidden{
  display:none !important;
}

.nfs-preview-led-toggle__btn{
  appearance:none;
  border:1px solid rgba(255,255,255,0.16);
  background:linear-gradient(180deg, rgba(20,20,28,0.96), rgba(10,10,16,0.96));
  color:#fff;
  border-radius:999px;
  min-height:46px;
  padding:10px 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:14px;
  font-weight:800;
  letter-spacing:.04em;
  cursor:pointer;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    opacity .18s ease;
  box-shadow:
    0 8px 24px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.nfs-preview-led-toggle__btn:hover{
  transform:translateY(-1px);
}

.nfs-preview-led-toggle__btn:active{
  transform:translateY(0);
}

.nfs-preview-led-toggle__btn.is-on{
  border-color:rgba(111,43,255,.65);
  box-shadow:
    0 0 0 1px rgba(111,43,255,.18),
    0 0 18px rgba(111,43,255,.35),
    0 10px 26px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.nfs-preview-led-toggle__btn.is-off{
  opacity:.92;
}

.nfs-preview-led-toggle__dot{
  width:10px;
  height:10px;
  border-radius:50%;
  flex:0 0 10px;
  background:#8c8c96;
  box-shadow:0 0 0 rgba(255,255,255,0);
  transition:background .18s ease, box-shadow .18s ease;
}

.nfs-preview-led-toggle__btn.is-on .nfs-preview-led-toggle__dot{
  background:#6F2BFF;
  box-shadow:
    0 0 8px rgba(111,43,255,.7),
    0 0 16px rgba(111,43,255,.45);
}

.nfs-preview-led-toggle__text{
  line-height:1;
}

@media (max-width: 768px){
  .nfs-preview-led-toggle{
    margin-top:12px;
  }

  .nfs-preview-led-toggle__btn{
    width:100%;
    max-width:220px;
    min-height:48px;
    font-size:13px;
  }
}





#neon-frame-product-section .nfs-simple-footer.nfs-simple-scope{
  margin-bottom: 6px;
}


#neon-frame-product-section .nfs-simple-atc-btn{
  border: 2px solid #6F2BFF;
}





#nfs-price-reassurance,
#nfs-price-reassurance-2{
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 1.8s ease,
    transform 1.8s ease;
}

#nfs-price-reassurance.is-visible,
#nfs-price-reassurance-2.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nfs-pr-line {
  display: block;
  margin-top: 4px; /* adjust this */
}


#neon-frame-product-section .nfs-dd.is-error .nfs-dd__btn{
  border: 2px solid #ff4d4d !important;
  box-shadow: 0 0 0 3px rgba(255,77,77,0.16);
}

#neon-frame-product-section .nfs-dd.is-error{
  animation: nfsShake .28s ease;
}

@keyframes nfsShake{
  0%{ transform: translateX(0); }
  25%{ transform: translateX(-3px); }
  50%{ transform: translateX(3px); }
  75%{ transform: translateX(-2px); }
  100%{ transform: translateX(0); }
}


#neon-frame-product-section .nfs-simple-error{
  color:#ff4d4f;
  background:rgba(255,77,79,0.08);
  border:1px solid rgba(255,77,79,0.25);
  border-radius:20px;
  padding:10px 14px;
  margin-top:20px;
  font-weight:500;
  text-align:center;
}





/* Desktop only */
@media (min-width: 768px){

  .nfs-pricenote-1{
    font-size:16px;
  }

  .nfs-pricenote-2{
    font-size:15px;
  }

}




@media (min-width: 768px){
  .nfs-simple-scope.nfsUploadProof{
    width: 520px !important;
    max-width: 520px !important;
  }
}





.nfs-start-note{
  margin-bottom: 20px;
}




@media (min-width: 420px) and (max-width: 470px){
  .nfs-simple-upload-btn{
    width: 95% !important;
  }
}



.nfs-simple-upload-btn{
  width:100%;
  padding:18px 14px;

  border-radius:32px;
  border:2px solid rgba(255,255,255,0.75); /* white outline */

  font-size:14px;
  font-weight:500;

  background:#6F2BFF;
  color:#fff;

  text-align:center;
  cursor:pointer;

  transition:all .15s ease;

  box-shadow:
    0 8px 22px rgba(111,43,255,0.35),
    inset 0 1px 0 rgba(255,255,255,0.18);
}



.nfs-simple-upload-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    0 12px 30px rgba(111,43,255,0.45),
    inset 0 1px 0 rgba(255,255,255,0.2);
}



.nfs-simple-upload-btn:active{
  transform:translateY(1px);
  box-shadow:
    0 4px 12px rgba(111,43,255,0.35),
    inset 0 2px 6px rgba(0,0,0,0.25);
}


.nfs-simple-upload-btn{
  letter-spacing:0.2px;
}


.nfs-simple-upload-btn{
  -webkit-tap-highlight-color: transparent;
}


.nfs-simple-upload-btn{
  background:linear-gradient(135deg,#6F2BFF,#8B5CFF);
}






@media (min-width:401px) and (max-width:430px){
  .nfs-simple-upload-btn{
    padding:16px 14px;
    font-size:13px;
  }
}




.nfs-simple-scope .nfs-label{
  font-weight:700;
}



/* 📱 Small phones */
@media (max-width: 430px){
  .nfs-start-note-bottom{
    font-size: 11px;
  }
}






.nfs-trust-line{
  color: rgba(255,255,255,0.98);
}



.cart-template__subheading {
	margin-top: 2px;
	
	font-size: 0.92rem;
	line-height: 1.4;
	opacity: 0.78;
}

@media screen and (max-width: 767px) {
	.cart-template__subheading {
		margin-top: 2px;
		
		font-size: 0.89rem;
	}
}


.cart-template__subheading {
	margin-top: 2px;


	font-size: 0.91rem;
	line-height: 1.4;

	color: #fff;          /* force visible */
	opacity: 0.85;        /* slightly muted, still premium */
	text-align: center;   /* center under heading */
}

@media screen and (min-width: 768px) {
  .cart-template__subheading {
    font-size: 1.30rem;   /* bump it up */
    
  }
}




.cart-template__title {
	margin-bottom: 12px !important
}

.cart-template__subheading {
  margin-top: 6px;
  margin-bottom: 12px;
}




.cart-template__subheading {
  color: #9b5cff; /* brighter neon purple */

  font-weight: 600;
  text-align: center;

  text-shadow:
    0 0 8px rgba(94, 0, 255, 0.6),
    0 0 18px rgba(94, 0, 255, 0.4);
}


.cart-template__subheading.nfs-cart-reassurance-23 {
  margin-top: 0 !important;
  padding-top: 0 !important;
  Margin-bottom: 28px;
  
}



.cart-item img {
  -webkit-touch-callout: none; /* disables iOS hold menu */
  -webkit-user-select: none;
  user-select: none;
}


/* 0–360 */
@media (max-width: 390px) {
  .cart-template__subheading {
    font-size: 10px;
  }
}

@media (min-width: 320px) and (max-width: 340px) {
  .cart-template__subheading {
    font-size: 9px !important;
  }
}

/* 361–390 */
@media (min-width: 390px) and (max-width: 430px) {
  .cart-template__subheading {
    font-size: 10px;
  }
}


@media (max-width: 430px) {
  .nfs-trust-line {
    font-size: 0.8rem;
  }
}


@media (max-width: 430px) {
  .cart-item__title {
    font-size: 0.98rem !important;
    line-height: 1.2;
    max-width: 200px;
  }
}



.nfs-cart-subtotal-stack{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.nfs-cart-subtotal-old{
  opacity: 0.5;
  font-size: 0.88em;
  line-height: 1;
}

.nfs-cart-subtotal-new{
  line-height: 1.1;
}

.nfs-cart-summary-saved{
  margin: 6px 0 0;
  text-align: right;
  font-size: 0.85em;
  font-weight: 700;
  color: #6F2BFF;
}



.nfs-cart-summary-saved{
  margin: 6px 0 0;
  text-align: right;
  font-size: 0.9em;
  font-weight: 800;
  color: #9B6BFF;

  text-shadow:
    0 0 2px rgba(155,107,255,0.1),
    0 0 7px rgba(155,107,255,0.1);
}







.nfs-dd__option.is-best-seller,
.nfs-dd__item.is-best-seller {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 14px;
}

.nfs-dd__option .nfs-best-seller-badge,
.nfs-dd__item .nfs-best-seller-badge {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;

margin-left: 0px;

font-size: 11.5px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.2px;

background: #FFD84D;
color: #000;
padding: 4px 8px;
border-radius: 6px;
white-space: nowrap;
}




@media (max-width: 768px) {
  .nfs-dd__option.is-best-seller,
  .nfs-dd__item.is-best-seller {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 12px;
  }

  .nfs-dd__option.is-best-seller .nfs-best-seller-badge,
  .nfs-dd__item.is-best-seller .nfs-best-seller-badge {
    margin-left: 0 !important;
    justify-self: end;
  }
}




/* FULL DESIGNER - badge BELOW text */
.nfs-dd__item.is-best-seller {
  display: flex;
  flex-direction: column; /* 👈 key */
  align-items: flex-start;
  gap: 4px;
}

.nfs-dd__item .nfs-best-seller-badge {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;

  background: #FFD84D;
  color: #000;

  padding: 3px 6px;
  border-radius: 5px;

  white-space: nowrap;
}





.nfs-dd__option.is-best-seller{
display: flex;
align-items: center;
justify-content: flex-start;
gap: 14px;
}

.nfs-dd__option .nfs-best-seller-badge {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;

margin-left: 8px;

font-size: 11.5px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.2px;

background: #FFD84D;
color: #000;
padding: 4px 8px;
border-radius: 6px;
white-space: nowrap;
}




@media (max-width: 3000px){

  .header-mobile__menu-list li:nth-child(2) 
  .header-navigation-item__text{
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .header-mobile__menu-list li:nth-child(2) 
  .header-navigation-item__text::after{
    content: "Most Popular 🔥";
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #6f2bff, #9b6bff);
    box-shadow: 0 0 12px rgba(111,43,255,.35);
    border: 1px solid rgba(255,255,255,0.9);
    white-space: nowrap;
  }

  @keyframes nfsPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}



}




@media (max-width: 3000px){

  .header-mobile__menu-list li:nth-child(1) 
  .header-navigation-item__text{
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .header-mobile__menu-list li:nth-child(1) 
  .header-navigation-item__text::after{
    content: "Advanced Editor";
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.85);

    /* NEW COLOR (not purple) */
    background: rgb(0 47 188);
    border: 1px solid rgba(255,255,255,0.78);

    backdrop-filter: blur(6px);
    white-space: nowrap;
  }

}


@media (max-width: 3000px){

  .header-mobile__menu-list li:nth-child(3) 
  .header-navigation-item__text{
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .header-mobile__menu-list li:nth-child(3) 
  .header-navigation-item__text::after{
    content: "3D Diecast ✨";
    padding: 3px 7px;
    border-radius: 999px;

    font-size: 10px;
    font-weight: 700;

    color: #fff;

    background: #ff1f1f;
    border: 1px solid rgba(255,255,255,0.72);

    box-shadow: 0 0 10px rgba(255,31,31,.35);

    white-space: nowrap;
  }

}


@media (max-width: 3000px){

  .header-mobile__menu-list li:nth-child(4) 
  .header-navigation-item__text{
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .header-mobile__menu-list li:nth-child(4) 
  .header-navigation-item__text::after{
    content: "3D Luxury 👑";
    padding: 3px 7px;
    border-radius: 999px;

    font-size: 10px;
    font-weight: 700;

    color: #fff;

    background: #ff1f1f;
    border: 1px solid rgba(255,255,255,0.72);

    box-shadow: 0 0 10px rgba(255,31,31,.35);

    white-space: nowrap;
  }

}



@media (max-width: 3000px){

  .header-mobile__menu-list li:nth-child(5) 
  .header-navigation-item__text{
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .header-mobile__menu-list li:nth-child(5) 
  .header-navigation-item__text::after{
    content: "Metal Art 💀";
    padding: 3px 7px;
    border-radius: 999px;

    font-size: 10px;
    font-weight: 700;

    color: #fff;

    background: #2E7D32;
    border: 1px solid rgba(255,255,255,0.72);

    box-shadow: 0 0 10px rgba(255,31,31,.35);

    white-space: nowrap;
  }

}


@media (max-width: 3000px){

  .header-mobile__menu-list li:nth-child(6) 
  .header-navigation-item__text{
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .header-mobile__menu-list li:nth-child(6) 
  .header-navigation-item__text::after{
    content: "Keys 🏷️🔑";
    padding: 3px 7px;
    border-radius: 999px;

    font-size: 10px;
    font-weight: 700;

    color: #fff;

    background: #0891B2;
    border: 1px solid rgba(255,255,255,0.72);

    box-shadow: 0 0 10px rgba(255,31,31,.35);

    white-space: nowrap;
  }

}



@media (max-width: 3000px){

  .header-mobile__menu-list li:nth-child(7) 
  .header-navigation-item__text{
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .header-mobile__menu-list li:nth-child(7) 
  .header-navigation-item__text::after{
    content: "Cabin 🌲🍃";
    padding: 3px 7px;
    border-radius: 999px;

    font-size: 10px;
    font-weight: 700;

    color: #fff;

    background: #F97316;
    border: 1px solid rgba(255,255,255,0.72);

    box-shadow: 0 0 10px rgba(255,31,31,.35);

    white-space: nowrap;
  }

}


/* BASE BADGE (smaller for BOTH) */
.nfs-footer-badge{
  margin-left: 5px;
  padding: 2px 5px;
  border-radius: 999px;

  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;

  color: #fff;
  background: linear-gradient(135deg, #6f2bff, #9b6bff);

  box-shadow: 0 0 8px rgba(111,43,255,.3);
  animation: nfsFooterPulse 2.2s ease-in-out infinite;

  white-space: nowrap;
}

/* ADVANCED EDITOR (same size, just different style) */
.nfs-footer-badge--alt{
  font-size: 8px;
  font-weight: 700;

  color: #ffffff;
  background: rgb(0 36 252);
  border: 1px solid rgba(111,43,255,0.25);

  backdrop-filter: blur(6px);

  box-shadow: none;
  animation: none;
}





/* ANIMATION */
@keyframes nfsFooterPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}



@media (min-width: 360px) and (max-width:375px) {

.nfs-footer-badge--alt{
  font-size: 7px;
  font-weight: 700;

  color: #ffffff;
  background: rgb(0 36 252);
  border: 1px solid rgba(111,43,255,0.25);

  backdrop-filter: blur(6px);

  box-shadow: none;
  animation: none;
}
}

/* ANIMATION */
@keyframes nfsFooterPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}


/* 🔥 WOW CTA BUTTON */
.nfs-simple-upload-btn{
  width:100%;
  padding:20px 16px;

  border-radius:32px;
  border:1.5px solid rgba(255,255,255,0.25);

  font-size:16px;
  font-weight:900;
  letter-spacing:0.3px;

  background:linear-gradient(135deg,#6F2BFF,#9B6BFF);
  color:#fff;

  text-align:center;
  cursor:pointer;

  position:relative;
  overflow:hidden;

  transition:all .2s ease;

  /* 🔥 glow + depth */
  box-shadow:
    0 10px 30px rgba(111,43,255,0.45),
    0 0 18px rgba(111,43,255,0.35),
    inset 0 1px 0 rgba(255,255,255,0.2);

  
}


/* ✨ moving light sweep */
.nfs-simple-upload-btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-75%;
  width:50%;
  height:100%;

  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.5),
    transparent
  );

  transform:skewX(-20deg);
  animation:nfsShine 3.5s infinite;
}




/* =========================
   NFS SIMPLE CTA — CONSISTENT BEAT
   ========================= */

@keyframes nfsCtaPulse{
  0%   { transform: scale(1); }
  25%  { transform: scale(1.04); }
  50%  { transform: scale(1); }
  75%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes nfsShine{
  0%   { left:-75%; }
  100% { left:130%; }
}

#neon-frame-product-section .nfs-simple-upload-btn{
  animation: nfsCtaPulse 3.5s linear infinite !important;
  will-change: transform;
  transform-origin: center;
}

#neon-frame-product-section .nfs-simple-upload-btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-75%;
  width:50%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.45),
    transparent
  );
  transform:skewX(-20deg);
  animation:nfsShine 4s linear infinite;
}

@media (max-width:430px){
  #neon-frame-product-section .nfs-simple-upload-btn{
    font-size:15px;
    padding:18px 14px;
  }
}






/* 📱 mobile tweak */
@media (max-width:430px){
  .nfs-simple-upload-btn{
    font-size:15px;
    padding:18px 14px;
  }
}



.nfs-simple-upload-btn{
  border:2.5px solid rgba(255,255,255,0.85);

  box-shadow:
    0 0 0 2px rgba(255,255,255,0.08),   /* subtle outer ring */
    0 10px 30px rgba(111,43,255,0.45),
    0 0 20px rgba(111,43,255,0.35);
}


.nfs-start-note-6{
margin-bottom: 4px;
margin-top:14px;

}


.nfs-start-note-5{
margin-bottom: 22px;
margin-top:4px;

}






#neon-frame-product-section button.nfs-change-photo-x{
  margin: 0 !important;
}



.nfs-change-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}



.nfs-draw-led-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 10px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 700;

  color: #d7dced;
  text-decoration: none;

  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.74);

  transition: all 0.2s ease;
}

.nfs-draw-led-btn:hover {
  background: rgba(255,255,255,0.10);
}



.nfs-change-actions {
  display: flex;
  align-items: center; /* THIS is key */
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}



.nfs-or-divider {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 100%;         /* match button height */
  line-height: 1;       /* remove weird spacing */

  font-size: 13px;
  color: rgba(255,255,255,0.7);
}



.nfs-change-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:12px;
}

.nfs-change-actions .nfs-change-photo-x,
.nfs-change-actions .nfs-draw-led-btn,
.nfs-change-actions .nfs-or-divider-5{
  min-height: 36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}

.nfs-or-divider-5{
  line-height:1 !important;
  padding:0 !important;
  margin:0 !important;
  font-size:13px;
  color:rgba(255,255,255,0.7);
}




.nfs-change-actions{
  margin-bottom: 26px; /* adjust this value */
}



#neon-frame-product-section .nfs-simple-preview-wrap{

  box-shadow:
    0 40px 100px rgba(0,0,0,0.75),   /* deep shadow */
    0 20px 40px rgba(0,0,0,0.45),    /* mid depth */
    0 6px 12px rgba(0,0,0,0.35),     /* tight contact shadow */
    0 0 10px rgba(111,43,255,0.15);  /* glow */

  transform: translateY(-3px); /* 👈 actual lift */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}



#neon-frame-product-section .nfs-simple-preview-wrap,
#neon-frame-product-section #nfs-simple-result-preview{
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}



.nfs-draw-led-btn{
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.nfs-draw-led-btn:active{
  transform: scale(0.96);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}



#neon-frame-product-section .nfs-price-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}

#neon-frame-product-section .nfs-price-label{
  font-size:16px;
  font-weight:700;
  line-height:1;
}

.nfs-price-compare{
  font-size:14px;
  opacity:0.8;
  text-decoration:line-through;
  text-decoration-thickness:1.75px; /* thinner line */
  text-decoration-color:rgba(255,255,255,0.8); /* softer color */
}



#neon-frame-product-section .nfs-price-current{
  font-size:15px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}




.nfs-price-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px; /* space between pills */
}





.nfs-today-pill{
  opacity:0;
  transform:translateY(6px) scale(0.95);

  max-height:0;
  margin-top:0;
  padding:0 12px;
  overflow:hidden;

  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    max-height 0.35s ease,
    margin-top 0.35s ease,
    padding 0.35s ease;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  line-height:1;
  white-space:normal;
  text-align:center;
  max-width:100%;

  background:rgba(111,43,255,0.18);
  border:1px solid rgba(111,43,255,0.28);
  color:#fff;
  box-shadow:0 0 12px rgba(111,43,255,0.35);
  pointer-events:none;
}

.nfs-today-pill.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);

  max-height:48px;
  margin-top:10px;
  padding:8px 12px;
}










/* FULL DESIGNER — MOST COMPACT badge BELOW text */
.nfs-dd__item.is-most-compact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.nfs-dd__item .nfs-most-compact-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2px;

  background: #0ea5e9;
  color: #fff;

  padding: 3px 6px;
  border-radius: 5px;
  white-space: nowrap;
}



.nfs-dd__option.is-compact-size,
.nfs-dd__item.is-compact-size {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.nfs-dd__option .nfs-compact-size-badge,
.nfs-dd__item .nfs-compact-size-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2px;

  background: #0e2de9;
  color: #fff;

  padding: 3px 6px;
  border-radius: 5px;
  white-space: nowrap;
  
}


.nfs-dd__option.is-compact-size,
.nfs-dd__item.is-compact-size,
.nfs-dd__opt.is-compact-size {
  display: block !important;
}

.nfs-dd__stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
}

.nfs-dd__text {
  display: block !important;
}

.nfs-compact-size-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  align-self: flex-start !important;

  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2px;

  background: #0e2de9;
  color: #fff;

  padding: 3px 6px;
  border-radius: 5px;
  white-space: nowrap;
}


.nfs-processed-line-3 {
  margin-top: 14px;
  margin-bottom: 6px;

  color: #ffffff; /* pure white */
  font-weight: 500;


}




.nfs-processed-line-3,
.nfs-processed-line-4,
 .nfs-processed-line-5{
  font-size: clamp(12.5px, 3.5vw, 15px);
}



.nfs-price-reassurance-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}



.nfs-price-reassurance-group{ 
  Margin-bottom: 10px;

}



.nfs-footer-payments {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.nfs-payment-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.nfs-payment-list li svg {
  height: 22px;
  width: auto;
  opacity: 0.9;
}


.nfs-payment-custom img {
  height: 22px;
  width: auto;
  display: block;
}

.nfs-payment-list li svg {
  height: 22px;
  width: auto;
}


.nfs-payment-list li svg,
.nfs-payment-custom img {
  height: 24px;
  width: auto;
  display: block;

  /* REMOVE weird backgrounds */
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}



.nfs-payment-list li svg,
.nfs-payment-custom img {
  height: 24px;
  width: auto;
  display: block;

  /* REMOVE weird backgrounds */
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}


.nfs-payment-list {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.nfs-payment-list li {
  display: flex;
  align-items: center;
  justify-content: center;
}



.nfs-payment-list li {
  opacity: 0.85;
  transition: all 0.2s ease;
}

.nfs-payment-list li:hover {
  opacity: 1;
  transform: translateY(-1px);
}



.nfs-payment-custom img {
  height: 24px !important;
  width: auto;
  max-height: 24px;
  object-fit: contain;
}



.nfs-payment-title {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 4px;
  
}





.nfs-afterpay-line{
  margin-top: 22px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  font-size:15px;
  font-weight:700;
  color:rgba(255,255,255,0.95);
}

.nfs-afterpay-line img{
  height:26px !important; /* FORCE bigger */
  width:auto;
  display:block;

  transform: translateY(1px); /* aligns baseline */
}


.nfs-affirm-line{
  margin-top: 6px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;

  font-size:15px;
  font-weight:700;
  color:rgba(255,255,255,0.95);
}

.nfs-affirm-line img{
  height:24px !important;
  width:auto;

  position: relative;
  top: -6px; /* 👈 lifts it up cleanly */
}







.nfs-afterpay-line-2{
  margin-top: 34px;
  margin-bottom: 20px;
  
  

  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,0.95);
}

.nfs-afterpay-line-2 img{
  height:26px !important; /* FORCE bigger */
  width:auto;
  display:block;

}


@media (max-width: 768px) {
  .nfs-afterpay-line-2{
    font-size: 11.5px;
    gap: 8px;
  }

 .nfs-afterpay-line-2 img{
    height: 22px !important; /* slightly smaller logos */
  }

}

@media (max-width: 420px) {
  .nfs-afterpay-line-2{
    font-size: 10.5px; /* 👈 smaller for small phones */
    gap: 6px;
  }

  .nfs-afterpay-line-2 img{
    height: 18px !important; /* slightly smaller logos */
  }
}


.nfs-afterpay-line--combo {
  margin-bottom: 18px;
}



.nfs-affirm-line-2{
  
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;

  font-size:15px;
  font-weight:600;
  color:rgba(255,255,255,0.95);
}

.nfs-affirm-logo{
  height:24px !important;
  width:auto;

  position: relative;
  top: -6px; /* 👈 lifts it up cleanly */
}

.nfs-affirm-footer{
  position: relative;
  top: -4px; /* 👈 adjust this */
}



.nfs-afterpay-line-3{
  margin-top: 22px;
  margin-bottom:26px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  font-size:15px;
  font-weight:700;
  color:rgba(255,255,255,0.95);
}

.nfs-afterpay-line-3 img{
  height:24px !important; /* FORCE bigger */
  width:auto;
  display:block;

}



.nfs-subheading.nfs-subheading-3 {
  text-align: center;
  margin-top: 4px;
  margin-bottom: 12px;
}










.nfs-contact-row{
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  
}

/* SMALL PILLS */
.nfs-contact-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 8px 16px;       /* 👈 smaller */
  border-radius: 999px;

  font-size: 12px;          /* 👈 smaller text */
  font-weight: 600;

  white-space: nowrap;      /* 👈 prevents wrapping */
  width: auto;              /* 👈 no stretching */

  text-decoration: none;
  cursor: pointer;

  transition: all 0.15s ease;
}

/* SMS */
.nfs-contact-pill--primary{
  background: rgba(111, 43, 255, 0.12);
  border: 1px solid rgba(111, 43, 255, 0.35);
  color: #e9e3ff;
}

/* WhatsApp */
.nfs-contact-pill--secondary{
  background: rgba(37,211,102,0.12);
  border: 1px solid rgba(37,211,102,0.35);
  color: #d7ffe7;
}

/* hover */
.nfs-contact-pill:hover{
  transform: translateY(-1px);
}


@media (min-width: 320px) and (max-width: 340px) {
  .nfs-contact-pill{
    padding: 2px 4px;   /* 👈 smaller pill size */
    font-size: 8px;     /* 👈 smaller text */
    gap: 2px;            /* tighter spacing */
  }
}




@media (min-width: 340px) and (max-width: 389px) {
  .nfs-contact-pill{
    padding: 2px 6px;   /* 👈 smaller pill size */
    font-size: 9px;     /* 👈 smaller text */
    gap: 2px;            /* tighter spacing */
  }
}


@media (min-width: 389px) and (max-width: 420px) {
  .nfs-contact-pill{
    padding: 6px 12px;   /* 👈 smaller pill size */
    font-size: 11px;     /* 👈 smaller text */
    gap: 4px;            /* tighter spacing */
  }
}



.nfs-contact-divider{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;

  color: rgba(255,255,255,0.5);

  padding: 0 2px;
  user-select: none;
}

.nfs-contact-divider-2{
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;

  color: rgba(255,255,255,0.5);

  padding: 0 2px;
  user-select: none;
}




@media (min-width: 768px){

  .nfs-contact-pill{
    padding: 10px 20px;      /* 👈 wider + taller */
    font-size: 13.5px;       /* 👈 slightly bigger text */
    gap: 8px;                /* 👈 more breathing room */

    border-radius: 999px;

    transform: scale(1.05);  /* 👈 subtle size boost */
  }

  .nfs-contact-row{
    gap: 10px;               /* 👈 more space between pills */
    margin-top: 12px;
  }

}





.nfs-contact-row-2{
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 36px;
  
}



.nfs-contact-label{
  text-align: center;

  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;

  color: rgba(255,255,255,0.5);

  margin-top: 12px;
  margin-bottom: 6px;
  margin-right: 2px;
}



@media (max-width: 420px) {
  .nfs-contact-label{
  text-align: center;

  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.5px;

  color: rgba(255,255,255,0.5);

  margin-top: 12px;
  margin-bottom: 6px;
  margin-right: 2px;
}

}

.nfs-hero-heading-wrap{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.nfs-hero-heading-main{
  margin:0;
}






@media (max-width: 768px){
  .section-title__text .nfs-heading-sub,
  .section-title__text .nfs-heading-sub *{
    font-size: 0.80em !important;
    line-height: 1.08 !important;
  }

  .section-title__text .nfs-heading-sub{
    display: block !important;
    margin-top: 3px;
    margin-bottom: 12px;
    opacity: 0.93;
  }
}


@media (max-width: 768px){
  .nfs-heading-sub em strong{
    font-weight: 500 !important;
  }
}



@media (max-width: 420px){
  .slideshow__slide-description{
    font-size: calc(1em - 1px)!important;
  }
}






/* Hide Proof Factor only while mobile menu is open */
body.nfs-menu-open #proof-factor-wheel-container,
body.nfs-menu-open #proof-factor-app{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}








/* Make option stack vertically */
.nfs-dd__opt,
.nfs-dd__item{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

/* Badge sits under text */
.nfs-most-compact-badge{
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}







/* PHONE ONLY — put badge under option text */
@media (max-width: 768px){

  #neon-frame-product-section .nfs-dd__opt,
  #neon-frame-product-section .nfs-dd__option,
  #neon-frame-product-section .nfs-dd__item{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 4px !important;
    position: relative !important;
  }

  #neon-frame-product-section .nfs-most-compact-badge,
  #neon-frame-product-section .nfs-best-seller-badge{
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
    align-self: flex-start !important;
  }
  #neon-frame-product-section .nfs-dd__tick{
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}




/* REMOVE LEFT MARGIN — PHONE ONLY */
@media (max-width: 768px){

  #neon-frame-product-section .nfs-most-compact-badge,
  #neon-frame-product-section .nfs-best-seller-badge{
    margin-left: 0 !important;
  }

}




@media (max-width: 768px){

  #neon-frame-product-section .nfs-best-seller-badge,
  #neon-frame-product-section .nfs-most-compact-badge{
    display: block !important;
    flex: 0 0 100% !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-top: 2px !important;
    margin-left: 0 !important;
    align-self: flex-start !important;
  }

}




#nfs-add-to-cart{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}








/* Hide gift planner only while the designer is fading/loading */
.nfs-designer:not(.is-ready) ~ .nfs-divider,
.nfs-designer:not(.is-ready) ~ .nfs-gift-planner {
  display: none !important;
}





/* small phones only */
@media (max-width: 365px){

  .nfs-afterpay-line-2{
    font-size: 8px !important;
  }

  .nfs-btn-primary{
    font-size: 11px !important;
  }

  .nfs-price-label,
  .nfs-price-current{
    font-size: 10px !important;
  }

  #neon-frame-product-section .nfs-dd__panel .nfs-dd__item,
  #neon-frame-product-section .nfs-dd__panel .nfs-dd__opt{
    font-size: 9.5px !important;
    letter-spacing: -0.1px !important;
  }

  #neon-frame-product-section .nfs-most-compact-badge{
    font-size: 9px !important;
    padding: 3px 8px !important;
    line-height: 1 !important;
    border-radius: 6px !important;
  }

  #neon-frame-product-section .nfs-seg__tab{
    font-size: 8px !important;
    line-height: 1 !important;
  }

  /* Draw Assist + Light Switch labels */
  #nfs-assisted-toggle .nfs-assisted-toggle__label,
  #nfs-lights-toggle .nfs-lights-toggle__label{
    font-size: 8px !important;
  }

  /* Fullscreen button */
  #nfs-fullscreen-btn{
    max-width: 96% !important;
    margin: 0 auto !important;
    display: block !important;
  }

}

@media (min-width: 365px) and (max-width: 390px){

  .nfs-price-label,
  .nfs-price-current{
    font-size: 11px !important;
  }

  #neon-frame-product-section .nfs-dd__panel .nfs-dd__item,
  #neon-frame-product-section .nfs-dd__panel .nfs-dd__opt{
    font-size: 11px !important;
    letter-spacing: -0.1px !important;
  }

}

/* ultra small */
@media (max-width: 341px){
  .nfs-canvas-header .nfs-canvas-btn{
    font-size: 8px !important;
    padding: 3px 4px !important;
    line-height: 1 !important;
  }
}

/* small */
@media (min-width: 342px) and (max-width: 365px){
  .nfs-canvas-header .nfs-canvas-btn{
    font-size: 8px !important;
    padding: 4px 6px !important;
    line-height: 1 !important;
  }
}

/* small */
@media (min-width: 365px) and (max-width: 385px){
  .nfs-canvas-header .nfs-canvas-btn{
    font-size: 9px !important;
    padding: 5px 8px !important;
    line-height: 1 !important;
  }
}

/* small */
@media (min-width: 390px) and (max-width: 419px){
  .nfs-canvas-header .nfs-canvas-btn{
    font-size: 10px !important;
    padding: 7px 8px !important;
    line-height: 1 !important;
  }
}

/* small */
@media (min-width: 420px) and (max-width: 550px){
  .nfs-canvas-header .nfs-canvas-btn{
    font-size: 10px !important;
    padding: 6px 9px !important;
    line-height: 1 !important;
  }
}






@media (max-width: 365px){

  #nfs-fs-toolbar{
    gap: 1px !important;
    padding: 4px 6px !important;
    min-height: auto !important;
  }


}


@media (max-width: 365px){

  #nfs-fs-overlay .nfs-disclaimer,
  #nfs-fs-overlay [class*="disclaimer"]{
    font-size: 8px !important;
    line-height: 1.2 !important;
    opacity: 0.85 !important;
  }

}



@media (max-width: 365px){

  #nfs-editor .nfs-heading.nfs-step2-heading{
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

}



@media (min-width: 320px) and (max-width: 380px) {

  .nfs-info-box{
    font-size: 10px !important;
    line-height: 1.3 !important;
    padding: 8px !important;
    max-width: 260px !important;
  }

}




@media (max-width: 365px){

  .nfs-price-reassurance{
    font-size: 8px !important;
    line-height: 1.2 !important;
  }

}


@media (max-width: 365px){

  .nfs-subheading.nfs-subheading-3{
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

}


@media (max-width: 365px){

  .nfs-mode-btn{
    padding: 6px 10px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    min-height: 32px !important;
    border-radius: 14px !important;
  }

}




@media (max-width: 365px){

  #neon-frame-product-section #nfs-editor .nfs-label--mode{
    font-size: 8px !important;
  }

}


@media (max-width: 365px){

  #neon-frame-product-section #nfs-editor .nfs-label--description{
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

}



@media (max-width: 340px){

  #neon-frame-product-section #nfs-editor .nfs-subheading{
    font-size: 9px !important;
    line-height: 1.3 !important;
  }

}


@media (max-width: 365px){

  .nfs-s1-watch-raw{
    font-size: 9px !important;
  }

}


@media (max-width: 365px){

  .nfs-demo-hint{
    font-size: 9px !important;
  }

}


@media (max-width: 365px){

  #neon-frame-product-section #nfs-editor .nfs-upload-hint{
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

}



@media (max-width: 340px){

  /* Make container stack */
  .nfs-upload-hint{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 6px !important;
  }

  /* Move the info button below */
  .nfs-upload-hint + .nfs-info-wrap,
  .nfs-upload-hint ~ .nfs-info-wrap{
    position: static !important;
    margin-top: 6px !important;
    display: block !important;
  }

}



@media (max-width: 370px){

  .header-navigation-item__text{
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

}

@media (max-width: 340px){

  .header-navigation-item__text{
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

}


@media (max-width: 370px){

  .header-mobile__secondary-link{
    font-size: 16px !important;
    line-height: 1.3 !important;
  }

}



@media (max-width: 360px){

  #neon-frame-product-section .nfs-heading.nfs-simple-scope{
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }

}


@media (max-width: 360px){

  #neon-frame-product-section .nfs-simple-upload-btn{
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

}


@media (max-width: 380px){

  #neon-frame-product-section .nfs-start-note{
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

}


@media (min-width: 319px) and (max-width: 370px) {
  #neon-frame-product-section .nfs-start-note-5 {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
}


@media (min-width: 371px) and (max-width: 430px) {
  .nfs-start-note-5 {
    white-space: nowrap;
    font-size: 11px;
  }
}

@media (min-width: 431px) and (max-width: 499px) {
  .nfs-start-note-5 {
    white-space: nowrap;
    font-size: 13px;
  }
}



@media (max-width: 360px){

  .nfs-pr__shipping-note-text{
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

}




@media (max-width: 360px){

  #neon-frame-product-section .nfs-start-note-6{
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

}


@media (max-width: 370px){

  #neon-frame-product-section .nfs-start-note-bottom,
  #neon-frame-product-section .nfs-full-designer-link{
    font-size: 10px !important;
    white-space: nowrap !important;
  }

}


@media (max-width: 360px){

  #neon-frame-product-section .nfs-simple-progress{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
  }

}


@media (max-width: 369px){

  #neon-frame-product-section .nfs-processed-line-3,
  #neon-frame-product-section .nfs-processed-line-4,
  #neon-frame-product-section .nfs-processed-line-5{
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

}


@media (min-width: 375px) and (max-width: 420px){

  #neon-frame-product-section .nfs-processed-line-3,
  #neon-frame-product-section .nfs-processed-line-4,
  #neon-frame-product-section .nfs-processed-line-5{
    font-size: 10.5px !important; /* 1 step bigger */
    line-height: 1.3 !important;
  }

}

@media (min-width: 420px) and (max-width: 700px){

  #neon-frame-product-section .nfs-processed-line-3,
  #neon-frame-product-section .nfs-processed-line-4,
  #neon-frame-product-section .nfs-processed-line-5{
    font-size: 12px !important; /* 1 step bigger */
    line-height: 1.3 !important;
  }

}


@media (min-width: 320px) and (max-width: 360px){
  #neon-frame-product-section .nfs-processed-line{
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
}

@media (min-width: 361px) and (max-width: 389px){
  #neon-frame-product-section .nfs-processed-line{
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
}

@media (min-width: 390px) and (max-width: 420px){
  #neon-frame-product-section .nfs-processed-line{
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
}


@media (max-width: 365px){

  #neon-frame-product-section .nfs-power-note.nfs-simple-scope{
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

}


@media (max-width: 768px){
  #neon-frame-product-section .nfs-dd__option.is-best-seller{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
  }

  #neon-frame-product-section .nfs-dd__option.is-best-seller .nfs-best-seller-badge{
    display: inline-flex !important;
    margin-left: 0 !important;
    margin-top: 4px !important;
    align-self: flex-start !important;
    justify-self: auto !important;
  }
}



@media (min-width: 430px) and (max-width: 770px){
  #neon-frame-product-section .nfs-best-seller-badge{
    transform: translateX(4px) !important;
  }
}


@media (max-width: 370px){

  /* price pill container */
  #neon-frame-product-section .nfs-price-pill,
  #neon-frame-product-section .nfs-simple-price-pill{
    padding: 10px 12px !important;
    border-radius: 16px !important;
  }

  /* current price */
  #neon-frame-product-section .nfs-price-current{
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  /* compare / old price */
  #neon-frame-product-section .nfs-price-compare{
    font-size: 12px !important;
  }

  /* label (PRICE:) */
  #neon-frame-product-section .nfs-price-label{
    font-size: 10px !important;
  }

}


@media (max-width: 333px){

  #neon-frame-product-section .nfs-price-pill,
  #neon-frame-product-section .nfs-simple-price-pill{
    padding: 8px 10px !important;
    border-radius: 999px !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
  }

  #neon-frame-product-section .nfs-price-label{
    font-size: 9px !important;
  }

  #neon-frame-product-section .nfs-price-current{
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #neon-frame-product-section .nfs-price-compare,
  #neon-frame-product-section .nfs-price-old{
    font-size: 11px !important;
    white-space: nowrap !important;
  }

}

@media (max-width: 360px){

  #neon-frame-product-section .nfs-price-pill{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
  }

  /* old price (crossed out) */
  #neon-frame-product-section .nfs-price-pill .nfs-old-price{
    display: block !important;
    font-size: 10px !important;
    opacity: 0.7;
  }

  /* new price */
  #neon-frame-product-section .nfs-price-pill .nfs-new-price{
    display: block !important;
    font-size: 14px !important;
    font-weight: 800;
  }

}



@media (max-width: 350px){

  #neon-frame-product-section .nfs-pricenote-1,
  #neon-frame-product-section .nfs-pricenote-2,
  #neon-frame-product-section .nfs-pr-line{
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

}


@media (max-width: 350px){

  #nfsCB-ai-limit-generate,
  .nfsCB-aiLimit{
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

}



@media (max-width: 390px){

  .nfsCB-aiStatus{
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

}


@media (max-width: 360px) {

  /* Tabs container (just in case it’s flexing weird) */
  #nfs-car-browser .nfsCB-tabs,
  #nfs-car-browser .nfsCB-aiModeTabs {
    gap: 4px !important;
  }

  /* Individual tab buttons */
  #nfs-car-browser .nfsCB-aiModeTab {
    font-size: 8.5px !important;      /* shrink text */
    padding: 6px 8px !important;     /* tighter padding */
    line-height: 1.2 !important;
    white-space: nowrap !important;  /* keep on one line */
  }

  /* If still too tight, allow wrap instead */
  #nfs-car-browser .nfsCB-aiModeTab span {
    white-space: normal !important;
  }

}



@media (max-width: 360px) {

  #nfsCB-ai-save,
  #nfsCB-ai-use,
  #nfsCB-ai-clear {
    font-size: 7.5px !important;
  }

}


@media (max-width: 360px) {

  #nfs-car-browser .nfsCB-aisubLabel {
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

}


@media (min-width: 361px) and (max-width: 385px) {

  #nfsCB-ai-save,
  #nfsCB-ai-use,
  #nfsCB-ai-clear {
    font-size: 8.5px !important;
  }

}


@media (min-width: 400px) and (max-width: 420px) {

  #nfsCB-ai-save,
  #nfsCB-ai-use,
  #nfsCB-ai-clear {
    font-size: 9.5px !important;
  }

}


@media (min-width: 320px) and (max-width: 345px) {

  #nfs-car-browser .nfsCB-aiEditTitle,
  #nfs-car-browser .nfsCB-transformLabel {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

}


@media (min-width: 320px) and (max-width: 410px){

  #neon-frame-product-section .nfs-dd__value {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

}




@media (min-width: 365px) and (max-width: 419px){

  #neon-frame-product-section .nfs-pricenote-1,
  #neon-frame-product-section .nfs-pricenote-2,
  #neon-frame-product-section #nfs-price-reassurance,
  #neon-frame-product-section #nfs-price-reassurance-2,
  #neon-frame-product-section #nfs-price-reassurance-3 {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

}


@media (min-width: 320px) and (max-width: 340px){

  #nfs-try-before-ordering .nfs-tbo__pill{
    font-size: 9px !important;
   

}
}


@media (max-width: 360px){

  #nfs-try-before-ordering .nfs-tbo__scene7-title{
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

}



@media (max-width: 360px){

  #nfs-try-before-ordering .nfs-tbo__nav-btn{
    font-size: 9px !important;
    padding: 6px 8px !important;
    line-height: 1.1 !important;
  }

}




@media (min-width: 320px) and (max-width: 375px){

  #neon-frame-product-section #nfs-price-pill .nfs-price-current{
    font-size: 11px !important;
  }

}



@media (min-width: 325px) and (max-width: 360px){

  #nfs-price-pill{
    padding: 6px 10px !important; /* tighten pill */
  }

}



@media (max-width: 380px){

  .slideshow__slide-description{
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

}






@media (max-width: 390px){

  #MainContent .nfs-heading-sub{
    font-size: 24px !important;
    line-height: 1.2 !important;
  }

}




@media (min-width: 320px) and (max-width: 370px){

  .nfsHeroPill{
    font-size: 9px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    line-height: 1.2 !important;
  }

}



.nfs-start-note{
  line-height: 1.4;
}

.nfs-start-note br{
  display: block;
  margin: 4px 0;
}


@media (min-width: 320px) and (max-width: 360px){
  #neon-frame-product-section .nfs-heading{
    font-size: 11px !important;
  }
}




#nfs-upload-error{
  display: none;
  opacity: 0;
  transform: translateY(-6px);
}


#nfs-full-upload-error{
  display: none;
  opacity: 0;
  transform: translateY(-6px);
}





@media (max-width: 390px){

  #neon-frame-product-section button.nfs-change-photo-x,
  #neon-frame-product-section .nfs-draw-led-btn{
    padding: 4px 10px !important;   /* tighter padding */
    font-size: 10px !important;     /* slightly smaller text */
  }

}










#neon-frame-product-section #nfs-starting-price-full-designer{
  display: block !important;
  white-space: nowrap !important;
  text-align: center;
  line-height: 1.2 !important;
  margin-bottom:4px;
  padding-inline: 8px !important;
  font-size: 14px 
}

#neon-frame-product-section #nfs-starting-price-full-designer strong{
  white-space: nowrap !important;
}

/* 310px → 340px */
@media (min-width: 310px) and (max-width: 340px){
  #neon-frame-product-section #nfs-starting-price-full-designer{
    font-size: 9.5px !important;
    padding-inline: 4px !important;
  }
}

/* 341px → 380px */
@media (min-width: 341px) and (max-width: 380px){
  #neon-frame-product-section #nfs-starting-price-full-designer{
    font-size: 11px !important;
    padding-inline: 6px !important;
  }
}

/* 381px → 470px */
@media (min-width: 381px) and (max-width: 470px){
  #neon-frame-product-section #nfs-starting-price-full-designer{
    font-size: 12px !important;
    padding-inline: 8px !important;
  }
}








#neon-frame-product-section .nfs-start-note-full-designer-2{
  display: block !important;
  white-space: nowrap !important;
  text-align: center;
  line-height: 1.2 !important;
  margin-bottom: 18px !important;
  padding-inline: 8px !important;
  font-size: 14px 
}

#neon-frame-product-section .nfs-start-note-full-designer strong{
  white-space: nowrap !important;
}

/* 320px → 340px */
@media (min-width: 320px) and (max-width: 340px){
  #neon-frame-product-section .nfs-start-note-full-designer-2{
    font-size: 9.5px !important;
    padding-inline: 4px !important;
  }
}

/* 341px → 380px */
@media (min-width: 341px) and (max-width: 380px){
  #neon-frame-product-section .nfs-start-note-full-designer-2{
    font-size: 11px !important;
    padding-inline: 6px !important;
  }
}

/* 381px → 470px */
@media (min-width: 381px) and (max-width: 470px){
  #neon-frame-product-section .nfs-start-note-full-designer-2{
    font-size: 12px !important;
    padding-inline: 8px !important;
  }
}






@media (min-width: 320px) and (max-width: 365px) {
  .text-section .text-section__subheading {
    font-size: 12px !important;
  }
}









#nfs-canvas-wrapper {
  position: relative;
}

#nfs-full-scene-layer {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  background: transparent !important;
  pointer-events: none;
}

#nfs-full-scene-bg-img,
#nfs-full-scene-img,
#nfs-full-scene-label {
  display: none;
}

#nfs-full-scene-layer.is-active #nfs-full-scene-bg-img,
#nfs-full-scene-layer.is-active #nfs-full-scene-img,
#nfs-full-scene-layer.is-active #nfs-full-scene-label {
  display: block;
}

#nfs-full-scene-bg-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#nfs-full-scene-img {
  position: absolute;
  z-index: 2;
  object-fit: cover;
  box-sizing: border-box;
  border: 3px solid #0f0f12;

  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.38),
    inset 0 4px 10px rgba(255,255,255,0.22),
    inset 0 -4px 10px rgba(0,0,0,0.55),
    inset 0 0 24px rgba(255,255,255,0.10);
}



#nfs-full-scene-label {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.65);
  background: rgba(0,0,0,0.34);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.nfs-full-scene-nav {
  position: absolute;
  left: 50%;
  bottom: 6px;
  z-index: 999;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  pointer-events: auto;
}

.nfs-full-scene-nav button {
  width: 50px;
  height: 28px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  line-height: 1;

  border: 1px solid rgba(255,255,255,0.75);
  background: linear-gradient(180deg, rgba(55,55,65,0.95), rgba(20,20,28,0.98));
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
}



#nfs-full-scene-bg-img,
#nfs-full-scene-img {
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    width 0.35s ease,
    height 0.35s ease,
    left 0.35s ease,
    top 0.35s ease,
    border-radius 0.35s ease;
}




#nfs-full-scene-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 998;
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

#nfs-full-scene-layer.is-changing::before {
  opacity: 1;
}

#nfs-full-scene-layer.is-changing #nfs-full-scene-img {
  transform: scale(0.96);
  opacity: 0.55;
}

#nfs-full-scene-img {
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    width 0.35s ease,
    height 0.35s ease,
    left 0.35s ease,
    top 0.35s ease,
    border-radius 0.35s ease;
}

#nfs-full-scene-label,
.nfs-full-scene-nav {
  z-index: 1000;
}



#nfs-full-scene-layer.is-active #nfs-full-scene-room {
  display: none !important;
}

#nfs-full-scene-layer:not(.is-active) #nfs-full-scene-room {
  display: inline-flex !important;
}




#nfs-full-scene-room {
  width: auto !important;

  padding: 0 2px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}



#nfs-full-scene-layer.is-active #nfs-full-scene-room {
  display: none !important;
}



#nfs-full-scene-room {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 6px;

  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;

  background: transparent;
  border: none;

  text-shadow:
    0 2px 6px rgba(0,0,0,0.85),
    0 0 10px rgba(0,0,0,0.45);
}




#nfs-full-scene-back-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  padding: 0 6px;

  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;

  background: transparent;
  border: none;

  text-shadow:
    0 2px 6px rgba(0,0,0,0.85),
    0 0 10px rgba(0,0,0,0.45);
}


html.nfs-fs-open #nfs-full-scene-layer {
  display: none !important;
}






#nfs-full-scene-draw-warning{
  display:none;
  position:absolute;
  left:50%;
  bottom:-2px;
  transform:translateX(-50%);
  z-index:9;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.55);
  color:#fff;
  font-size:11px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
}


@media (min-width: 310px) and (max-width: 365px){
  #nfs-full-scene-draw-warning{
    font-size: 9px !important;
     padding:4px 8px;
  }
}

@media (min-width: 365px) and (max-width: 390px){
  #nfs-full-scene-draw-warning{
    font-size: 10px !important;
     padding:4px 8px;
  }
}

@media (min-width: 391px) and (max-width: 788px){
  #nfs-full-scene-draw-warning{
    font-size: 12px !important;
     padding:4px 8px;
  }
}



@media (min-width: 789px) {
  #nfs-full-scene-draw-warning{
    display: none;
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    z-index: 9;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.55);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
  }
}



@media (min-width: 320px) and (max-width: 330px) {
  .nfs-swatch[data-color="#ff0096"], /* Pink */
  .nfs-swatch[data-color="#7d00ff"], /* Purple */
  .nfs-swatch[data-color="#00ffff"], /* Cyan */
  .nfs-swatch[data-color="#008000"]  /* Green */ {
    display: none !important;
  }
}


@media (min-width: 330px) and (max-width: 370px) {

  .nfs-swatch[data-color="#7d00ff"], /* Purple */
  .nfs-swatch[data-color="#00ffff"], /* Cyan */
  .nfs-swatch[data-color="#008000"]  /* Green */ {
    display: none !important;
  }
}


@media (min-width: 371px) and (max-width: 400px) {


  .nfs-swatch[data-color="#00ffff"], /* Cyan */
  .nfs-swatch[data-color="#008000"]  /* Green */ {
    display: none !important;
  }
}


@media (min-width: 400px) and (max-width: 429px) {



  .nfs-swatch[data-color="#008000"]  /* Green */ {
    display: none !important;
  }
}








#neon-frame-product-section .nfs-simple-preview-wrap {
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}






#nfs-canvas-wrapper.nfs-full-scene-mode #nfs-full-scene-layer {
  border-radius: 0 !important;
  overflow: hidden !important;
}

#nfs-canvas-wrapper.nfs-full-scene-mode #nfs-full-scene-bg-img {
  border-radius: 0 !important;
}










/* full designer scene nav */

#nfs-external-scene-nav {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 6px;

  width: 100%;
  max-width: 340px;
  margin: 10px auto 8px;
}

#nfs-external-scene-nav button {
  width: 42px;
  height: 32px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.70);
  background: rgba(15, 12, 25, 0.7);
  backdrop-filter: blur(6px);

  color: #fff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;

  padding: 0;

  transition: transform 0.08s ease, box-shadow 0.08s ease;

  box-shadow:
    0 2px 0 rgba(0,0,0,0.6),
    0 4px 10px rgba(0,0,0,0.4);
}

#nfs-external-scene-nav button:hover {
  box-shadow:
    0 2px 0 rgba(0,0,0,0.6),
    0 0 10px rgba(111,43,255,0.5);
}

#nfs-external-scene-nav button:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.6),
    0 2px 4px rgba(0,0,0,0.4);
}

#nfs-external-scene-nav button span {
  display: inline-block;
  transform: translateY(-3px);
}

#nfs-full-scene-prev {
  justify-self: end;
}

#nfs-full-scene-next {
  justify-self: start;
}

#nfs-external-scene-label {
  grid-column: 2;
  justify-self: stretch;

  min-width: 0;
  width: 100%;

  text-align: center;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}



@media (min-width: 320px) and (max-width: 369px){

  #nfs-external-scene-nav {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    gap: 5px;
    max-width: 300px;
  }

  #nfs-external-scene-nav button {
    width: 36px;
    height: 28px;

    font-size: 16px;
    border-radius: 8px;

    box-shadow:
      0 1.5px 0 rgba(0,0,0,0.6),
      0 3px 8px rgba(0,0,0,0.35);
  }

  #nfs-external-scene-nav button:active {
    transform: translateY(1.5px);
    box-shadow:
      0 1px 0 rgba(0,0,0,0.6),
      0 2px 3px rgba(0,0,0,0.35);
  }

  #nfs-external-scene-nav button span {
    transform: translateY(-2px);
  }

  #nfs-external-scene-label {
    font-size: 9px;
    line-height: 1.2;
  }

}




#nfs-external-scene-label .nfs-scene-sub{
  display:block;
  font-size:10px;
  font-weight:600;
  opacity:0.7;
  margin-top:2px;
}









@media (max-width: 768px){

  #nfs-canvas-wrapper .nfs-brush-toggle{
    position:absolute !important;

    top:96px;
    left:6px;

    z-index:90;

    width:34px;
    height:34px;
    border-radius:999px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,255,255,0.85);
    background:rgba(0,0,0,0.58);
    color:#fff;

    font-size:17px;
    line-height:1;
    padding:0;
    cursor:pointer;

    box-shadow:0 4px 14px rgba(0,0,0,0.35);
    -webkit-tap-highlight-color:transparent;
  }

  #nfs-canvas-wrapper .nfs-brush-toggle:active{
    transform:scale(0.92);
  }

}

#nfs-canvas-wrapper .nfs-brush-popover{
  position:absolute;
   left:52px;
  top:118px; 
  z-index:121;

  width:155px;
  padding:10px 11px 11px;

  border-radius:14px;
  border:1px solid rgba(255,255,255,0.85);
  background:rgba(0,0,0,0.72);
  box-shadow:0 8px 24px rgba(0,0,0,0.45);

  opacity:0;
  visibility:hidden;
  transform:translateX(-8px) scale(0.96);
  transition:opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}

#nfs-canvas-wrapper .nfs-brush-popover.is-open{
  opacity:1;
  visibility:visible;
  transform:translateX(0) scale(1);
}

#nfs-canvas-wrapper .nfs-brush-popover__label{
  color:#fff;
  font-size:11px;
  font-weight:900;
  margin-bottom:7px;
  text-align:center;
}

#nfs-canvas-wrapper #nfs-brush-size{
  width:100%;
  margin:0;
}








@media (max-width: 768px){

#neon-frame-product-section #nfs-brush-size::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;

  width: 20px;   /* 👈 slightly bigger */
  height: 20px;

  margin-top: -5px; /* 👈 re-center */

  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.95);
  background: linear-gradient(90deg, #32f0ff, #f044ff);
  box-shadow: 0 7px 14px rgba(0,0,0,0.4), 0 0 14px rgba(184,43,255,0.5);
}

}




@media (max-width: 768px){
  #nfs-panel-draw .nfs-tool-group:first-child{
    display: none !important;
  }
}








@media (max-width:768px){

  #nfs-canvas-wrapper .nfs-color-toggle{
    position:absolute !important;

    top:54px;
    left:6px;

    right:auto;

    z-index:120;

    width:34px;
    height:34px;
    border-radius:999px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,255,255,0.85);
    background:rgba(0,0,0,0.58);
    color:#fff;

    font-size:17px;
    padding:0;
    cursor:pointer;

    box-shadow:0 4px 14px rgba(0,0,0,0.35);
    -webkit-tap-highlight-color:transparent;
  }

  #nfs-canvas-wrapper .nfs-color-toggle:active{
    transform:scale(0.92);
  }



  #nfs-canvas-wrapper .nfs-color-popover{
  position:absolute;
  top:76px;
  left:52px;

  z-index:121;

  width:128px;
  padding:9px;

  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:7px;

  border-radius:14px;
  border:1px solid rgba(255,255,255,0.85);
  background:rgba(0,0,0,0.72);
  box-shadow:0 8px 24px rgba(0,0,0,0.45);

  opacity:0;
  visibility:hidden;
  transform:translateY(8px) scale(0.95);
  transition:opacity 160ms ease, transform 160ms ease;
}



  #nfs-canvas-wrapper .nfs-color-popover.is-open{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
  }

  #nfs-canvas-wrapper .nfs-mobile-swatch{
    width:28px;
    height:28px;
    border-radius:999px;
    border:2px solid rgba(255,255,255,0.85);
    cursor:pointer;
    padding:0;
  }

  #nfs-canvas-wrapper .nfs-mobile-swatch[data-color="#ffffff"]{ background:#ffffff; }
  #nfs-canvas-wrapper .nfs-mobile-swatch[data-color="#ff0000"]{ background:#ff0000; }
  #nfs-canvas-wrapper .nfs-mobile-swatch[data-color="#ff910f"]{ background:#ff910f; }
  #nfs-canvas-wrapper .nfs-mobile-swatch[data-color="#007aff"]{ background:#007aff; }
  #nfs-canvas-wrapper .nfs-mobile-swatch[data-color="#ffd400"]{ background:#ffd400; }
  #nfs-canvas-wrapper .nfs-mobile-swatch[data-color="#ff0096"]{ background:#ff0096; }
  #nfs-canvas-wrapper .nfs-mobile-swatch[data-color="#008000"]{ background:#008000; }
  #nfs-canvas-wrapper .nfs-mobile-swatch[data-color="#7d00ff"]{ background:#7d00ff; }
  #nfs-canvas-wrapper .nfs-mobile-swatch[data-color="#00ffff"]{ background:#00ffff; }

  /* hide original desktop colour block on phone */
  #nfs-panel-draw .nfs-tool-group:nth-of-type(2){
    display:none !important;
  }
  }


@media (min-width:769px){
  #nfs-color-toggle,
  #nfs-color-popover{
    display:none !important;
  }
}


#nfs-canvas-wrapper .nfs-mobile-swatch--rainbow{
  background:conic-gradient(
    red,
    yellow,
    lime,
    cyan,
    blue,
    magenta,
    red
  );
  position:relative;
  overflow:hidden;
}

#nfs-canvas-wrapper .nfs-mobile-swatch--rainbow input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}



@media (max-width: 768px){

  #neon-frame-product-section .nfs-label--mode{
    font-size: 0 !important; /* hide original text */
    position: relative;
  }

  #neon-frame-product-section .nfs-label--mode::after{
    content: "Optional: Add LED instructions";
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.85);

    display: block;
    text-align: center;
  }

}



@media (max-width: 768px){

  #nfs-mode-draw{
    font-size: 0;
  }

  #nfs-mode-draw::after{
    content: "✏️ Draw";
    font-size: 12px;
  }

  #nfs-mode-describe{
    font-size: 0;
  }

  #nfs-mode-describe::after{
    content: "💬 Describe";
    font-size: 12px;
  }

}





@media (max-width:768px){

  /* 💬 BUTTON */
  #nfs-canvas-wrapper .nfs-desc-toggle{
    position:absolute !important;

    top:12px;
    left:6px;

    z-index:120;

    width:34px;
    height:34px;
    border-radius:999px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,255,255,0.85);
    background:rgba(0,0,0,0.58);
    color:#fff;

    font-size:17px;
    cursor:pointer;

    box-shadow:0 4px 14px rgba(0,0,0,0.35);
  }

  #nfs-canvas-wrapper .nfs-desc-toggle:active{
    transform:scale(0.92);
  }



  /* 💬 POPOVER */
#nfs-canvas-wrapper .nfs-desc-popover{
  position:absolute;

  left:55%;
  top:70px;

  z-index:201;

  width:240px;
  max-width:calc(100% - 24px);

  padding:4px;

  border-radius:14px;
  border:1px solid rgba(255,255,255,0.85);

  background:#0f0c19;
  box-shadow:0 10px 28px rgba(0,0,0,0.6);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transform:translateX(-50%) scale(0.96);

  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

#nfs-canvas-wrapper .nfs-desc-popover.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;

  transform:translateX(-50%) scale(1);
}

  /* TEXTAREA */
  #nfs-canvas-wrapper #nfs-description-mobile{
    width:100%;
    min-height:120px;
    resize:none;

    border-radius:10px;
    border:1px solid rgba(255,255,255,0.35);

    background:#1a162b;
    color:#fff;

    font-size:13px;
    padding:10px;
    outline:none;
  }




  #nfs-canvas-wrapper .nfs-desc-popover__label{
    display:block;
    text-align:center;     /* 👈 center it */
    width:100%;

    font-size:9px;
    font-weight:700;
    color:#fff;

    margin-bottom:6px;
  }


}







@media (max-width:768px){

  #nfs-canvas-wrapper .nfs-desc-popover__label{
    display:block;
    text-align:center;     /* 👈 center it */
    width:100%;

    font-size:12px;
    font-weight:800;
    color:#fff;

    margin-bottom:8px;
  }

}






@media (max-width:768px){
  #neon-frame-product-section #nfs-panel-draw,
  #neon-frame-product-section .nfs-controls-card{
    display:none !important;
  }
}




@media (min-width:315px) and (max-width:400px){

  /* 💬 BUTTON (slightly smaller + adjusted stack) */
  #nfs-canvas-wrapper .nfs-desc-toggle{
    position:absolute !important;
    left:6px;
    bottom:212px;
    z-index:120;

    width:34px;
    height:34px;
    border-radius:999px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,255,255,0.85);
    background:rgba(0,0,0,0.58);
    color:#fff;

    font-size:17px;
    cursor:pointer;

    box-shadow:0 4px 14px rgba(0,0,0,0.35);
  }

  #nfs-canvas-wrapper .nfs-desc-toggle:active{
    transform:scale(0.92);
  }

/* 💬 POPOVER */
#nfs-canvas-wrapper .nfs-desc-popover{
  position:absolute;

  left:55%;
  top:80px;

  z-index:201;

  width:180px;
  max-width:190px;
  padding:6px;

  box-sizing:border-box;

  border-radius:12px;
  border:1px solid rgba(255,255,255,0.85);

  background:#0f0c19;
  box-shadow:0 8px 20px rgba(0,0,0,0.5);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transform-origin:center center;
  transform:translateX(-50%) scale(0.96);

  transition:
    opacity 160ms ease,
    transform 200ms cubic-bezier(.22,.61,.36,1);
}

#nfs-canvas-wrapper .nfs-desc-popover.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;

  transform:translateX(-50%) scale(1);
}

  /* TEXTAREA (smaller) */
  #nfs-canvas-wrapper #nfs-description-mobile{
    width:100%;
    min-height:90px;   /* 👈 shorter */
    resize:none;

    border-radius:8px;
    border:1px solid rgba(255,255,255,0.35);

    background:#1a162b;
    color:#fff;

    font-size:12px;
    padding:8px;
    outline:none;
  }

}




#nfs-canvas-wrapper .nfs-mobile-swatch{
  position:relative;
}

#nfs-canvas-wrapper .nfs-mobile-swatch.is-active::after{
  content:"✓";
  position:absolute;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:14px;
  font-weight:900;
  color:#fff;
  text-shadow:0 0 4px rgba(0,0,0,0.8);
}

#nfs-canvas-wrapper .nfs-mobile-swatch[data-color="#ffffff"].is-active::after{
  color:#000;
  text-shadow:none;
}




#nfs-replay-photo-mirror{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0.01;
  pointer-events:none;
  z-index:0;
}

#nfs-zoom-layer{
  position:relative;
  z-index:2;
}



html.nfs-fs-open #nfs-brush-toggle,
html.nfs-fs-open #nfs-color-toggle,
html.nfs-fs-open #nfs-desc-toggle,
html.nfs-fs-open #nfs-brush-popover,
html.nfs-fs-open #nfs-color-popover,
html.nfs-fs-open #nfs-desc-popover {
  display: none !important;
}
























@media (max-width: 768px){


/* ==========================================================
   NFS — TRUE MINIFIED CANVAS (scaled from all edges)
   ========================================================== */

#nfs-editor.nfs-compact-preview .nfs-canvas-column{
  position: relative;
}

/* smaller starting box + smooth open */
#nfs-editor.nfs-compact-preview #nfs-canvas-wrapper{
  transform: scale(.70);
  transform-origin: center center;

  transition:
    transform 360ms cubic-bezier(.16, 1, .3, 1),
    margin 360ms cubic-bezier(.16, 1, .3, 1);

  margin: 58px auto;
  overflow: hidden !important;
  border-radius: 18px !important;
  background: transparent !important;
}

/* animated open state */
#nfs-editor.nfs-compact-preview.nfs-compact-expanding #nfs-canvas-wrapper{
  transform: scale(1);
  margin: 0 auto;
}

/* soften look + reduce black edge look */
#nfs-editor.nfs-compact-preview #nfs-zoom-layer{
  filter: blur(2.4px) brightness(.72) saturate(.9);
  pointer-events: none !important;
  background: transparent !important;
}

/* remove blur while expanding */
#nfs-editor.nfs-compact-preview.nfs-compact-expanding #nfs-zoom-layer{
  filter: blur(0px) brightness(1);
}

/* stop canvas black edge bleeding */
#nfs-editor.nfs-compact-preview #nfs-canvas{
  display: block;
  background: transparent !important;
}

/* hide tools */
#nfs-editor.nfs-compact-preview #nfs-lights-toggle,
#nfs-editor.nfs-compact-preview #nfs-brush-toggle,
#nfs-editor.nfs-compact-preview #nfs-color-toggle,
#nfs-editor.nfs-compact-preview #nfs-desc-toggle,
#nfs-editor.nfs-compact-preview #nfs-zoom-hint,
#nfs-editor.nfs-compact-preview #nfs-external-scene-nav,
#nfs-editor.nfs-compact-preview .nfs-canvas-tools{
  display: none !important;
}










/* ==========================================================
   NFS — Overlay CTA ON PHOTO
   ========================================================== */

#nfs-editor.nfs-compact-preview #nfs-canvas-wrapper{
  position: relative;
  z-index: 1;
}

#nfs-editor.nfs-compact-preview #nfs-canvas-wrapper::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:9998;
  background: rgba(0,0,0,.35);
  border-radius: inherit;
  pointer-events:none;
  transition: opacity 160ms ease;
}


#nfs-editor.nfs-compact-preview #nfs-full-scene-layer{
  pointer-events: none !important;
  z-index: 10 !important;
}





@media (max-width: 768px){
  #nfs-editor.nfs-compact-preview #nfs-canvas-wrapper{
    transform: none !important;
    width: 62% !important;
    margin: 28px auto 48px !important;
    overflow: hidden !important;

    transition:
    width 720ms cubic-bezier(.22, 1, .36, 1),
    margin 720ms cubic-bezier(.22, 1, .36, 1),
    border-radius 720ms cubic-bezier(.22, 1, .36, 1) !important;

  will-change: width, margin, border-radius;

    
  }
  

  #nfs-editor.nfs-compact-preview #nfs-zoom-layer{
    width: 100% !important;
    height: 100% !important;
  }

  #nfs-editor.nfs-compact-preview #nfs-canvas{
    width: 100% !important;
    height: 100% !important;
  }

  #nfs-editor.nfs-compact-preview.nfs-compact-expanding #nfs-canvas-wrapper{
    width: 100% !important;
    margin: 0 auto !important;
  }
}


@media (max-width: 768px){
  #nfs-editor.nfs-compact-preview #nfs-canvas-wrapper{
    width: 59vw !important;
    overflow: hidden !important;
  }

  #nfs-editor.nfs-compact-preview #nfs-zoom-layer{
    width: calc(100% + 6px) !important;
    height: calc(100% + 6px) !important;
    margin-left: -3px !important;
    margin-top: -3px !important;
    transform: none !important;
  }

  #nfs-editor.nfs-compact-preview #nfs-canvas{
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    display: block !important;
  }
}






/* overlay container */
.nfs-overlay-ui{
  position:absolute;
  inset:0;
  z-index:9999;

  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  pointer-events:none;
  color:#fff;
  text-align:center;
  text-shadow:0 2px 10px rgba(0,0,0,.65);
}

/* show only in compact mode */
#nfs-editor.nfs-compact-preview .nfs-overlay-ui{
  display:flex;
}

/* fade out on expand */
#nfs-editor.nfs-compact-expanding .nfs-overlay-ui{
  opacity:0;
}

/* title */
.nfs-title{
  font-size:14px;
  font-weight:900;
  margin-bottom:30px;
}

/* tools row */
.nfs-tools{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px; /* 🔥 precise spacing control */
  width:90%;
  max-width:360px;
}

/* each item */
.nfs-tools div{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;

  font-size:18px;
}

/* label */
.nfs-tools span{
  font-size:11px;
  font-weight:700;
  opacity:.9;
}


.nfs-icon,
.nfs-tools span,
.nfs-title{
  text-shadow:
    0 2px 6px rgba(0,0,0,.95),
    0 4px 18px rgba(0,0,0,.85);
}




.nfs-expand-icon{
  width:42px;
  height:42px;
  margin-bottom:10px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9V3h6'/%3E%3Cpath d='M21 9V3h-6'/%3E%3Cpath d='M3 15v6h6'/%3E%3Cpath d='M21 15v6h-6'/%3E%3C/g%3E%3C/svg%3E");

  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;

  opacity:.95;
}


.nfs-expand-icon{
  animation: nfsPulse 1.15s ease-in-out infinite;
}

@keyframes nfsPulse{
  0%{
    transform:scale(1);
    opacity:.78;
    filter: drop-shadow(0 0 0 rgba(255,255,255,0));
  }

  50%{
    transform:scale(1.18);
    opacity:1;
    filter: drop-shadow(0 0 12px rgba(255,255,255,.75));
  }

  100%{
    transform:scale(1);
    opacity:.78;
    filter: drop-shadow(0 0 0 rgba(255,255,255,0));
  }
}








/* tool container */
.nfs-tool{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

/* circle icon */
.nfs-icon{
  display:flex;
  align-items:center;
  justify-content:center;

  width:32px;
  height:32px;
  border-radius:50%;

  border:1.5px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.06);

  font-size:18px;

  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

/* label */
.nfs-tools span{
  font-size:11px;
  font-weight:700;
  opacity:.9;
}


}




@media (max-width: 768px){


#nfs-lights-toggle {
  top: auto !important;
  bottom: 4px !important;
  right:4px !important;
}
}




.nfs-compact-return-btn{
  display:none;
}

@media (max-width: 768px){
  #nfs-editor:not(.nfs-compact-preview) .nfs-compact-return-btn{
    position:absolute;
    top:8px;
    right:8px;
    z-index:10002;

    width:30px;
    height:30px;
    border-radius:999px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,.55);
    border:1px solid rgba(255,255,255,.75);
    color:#fff;
    font-size:18px;

    backdrop-filter: blur(8px);
    box-shadow:0 6px 18px rgba(0,0,0,.35);
  }

  #nfs-editor.nfs-compact-preview .nfs-compact-return-btn{
    display:none !important;
  }
}



.nfs-compact-return-btn svg{
  width:20px;
  height:20px;
  stroke-width:2.5;
}




@media (max-width: 768px){
  #nfs-editor.nfs-compact-preview #nfs-canvas-wrapper{
    aspect-ratio: var(--nfs-photo-ratio, 1 / 1) !important;
    height: auto !important;
    min-height: 0 !important;
  }
}





@media (min-width: 320px) and (max-width: 369px) {
  #nfs-editor:not(.nfs-compact-preview) .nfs-compact-return-btn{
    position:absolute;
    top:6px;
    right:6px;
    z-index:10002;

    width:26px;
    height:26px;
    border-radius:999px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,.55);
    border:1px solid rgba(255,255,255,.75);
    color:#fff;
    font-size:18px;

    backdrop-filter: blur(8px);
    box-shadow:0 6px 18px rgba(0,0,0,.35);
  }

  #nfs-editor.nfs-compact-preview .nfs-compact-return-btn{
    display:none !important;
  }
}







@media (min-width: 310px) and (max-width: 390px) {


#nfs-canvas-wrapper .nfs-brush-toggle,
#nfs-canvas-wrapper .nfs-color-toggle,
#nfs-canvas-wrapper .nfs-desc-toggle{
  position:absolute !important;

  left:6px;

  z-index:90;

  width:28px;
  height:28px;
  border-radius:999px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,255,255,0.85);
  background:rgba(0,0,0,0.58);
  color:#fff;

  font-size:17px;
  line-height:1;
  padding:0;
  cursor:pointer;

  box-shadow:0 4px 14px rgba(0,0,0,0.35);
  -webkit-tap-highlight-color:transparent;
}

/* TOP LEFT STACK */

#nfs-canvas-wrapper .nfs-desc-toggle{
  top:12px;
}

#nfs-canvas-wrapper .nfs-color-toggle{
  top:50px;
}

#nfs-canvas-wrapper .nfs-brush-toggle{
  top:88px;
}


}



@media (min-width: 310px) and (max-width: 340px) {


/* tool container */
.nfs-tool{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

/* circle icon */
.nfs-icon{
  display:flex;
  align-items:center;
  justify-content:center;

  width:26px;
  height:26px;
  border-radius:50%;

  border:1.5px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.06);

  font-size:16px;

  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

/* label */
.nfs-tools span{
  font-size:11px;
  font-weight:700;
  opacity:.9;
}
}






/* === FULL DESIGNER LOOX === */

#nfs-full-reviews-container .loox-v2-carousel-container {
  width: 100%;
  margin: 0 auto;
}

#nfs-full-reviews-container {
  width: 100%;
  margin-top: 10px;
  position: relative;
}

/* 🔒 Hide "Powered by Loox" */
#nfs-full-reviews-container::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40px; /* tweak */
  background: #12101b;
  pointer-events: none;
  z-index: 5;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.55);
}

/* 🔥 TEXT LABEL */
#nfs-full-reviews-container::before {
  content: "Real customers. Real builds. Yours next.";
  position: absolute;
  left: 50%;
  bottom: 10px;

  transform: translateX(-50%);
  
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  white-space: nowrap;

  z-index: 6;

  text-shadow:
    0 2px 6px rgba(0,0,0,0.8),
    0 0 10px rgba(0,0,0,0.6);

  pointer-events: none;
}




@media (min-width:320px) and (max-width: 360px) {


/* 🔥 TEXT LABEL */
#nfs-full-reviews-container::before {
  content: "Real customers. Real builds. Yours next.";
  position: absolute;
  left: 50%;
  bottom: 10px;

  transform: translateX(-50%);
  
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  white-space: nowrap;

  z-index: 6;

  text-shadow:
    0 2px 6px rgba(0,0,0,0.8),
    0 0 10px rgba(0,0,0,0.6);

  pointer-events: none;
}
}




/* Hide on desktop */
.nfs-home-video {
  display: none !important;
}

@media (max-width: 768px) {
  .nfs-home-video {
    display: block;
    padding: 10px 0 6px;
  }

  .nfs-video-frame {
    max-width: 320px;
    margin: 20px auto 0;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.14);
    background: #0f0f14;
    box-shadow:
      0 6px 20px rgba(0,0,0,0.55),
      0 0 14px rgba(111,43,255,0.18);
  }

  .nfs-video-frame video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
}




.header-mobile__menu-list li:nth-child(2) 
.header-navigation-item__text::after{
  filter: none !important;
}








#nfs-upload-gate{
  position: relative;
}

#nfs-upload-gate.nfs-upload-card--dragover{
  outline: 2px dashed rgba(111,43,255,0.95);
  outline-offset: -14px;
  box-shadow:
    inset 0 0 0 4px rgba(111,43,255,0.18),
    0 0 34px rgba(111,43,255,0.35);
}

#nfs-upload-gate.nfs-upload-card--dragover .nfs-upload-card{
  transform: scale(1.01);
}

#nfs-upload-gate.nfs-upload-card--dragover #nfs-browse{
  background: linear-gradient(135deg, #6F2BFF, #8b5cff);
}




.cart-item__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.cart-item__quantity-wrapper{
  display:flex;
  align-items:center;
  gap:10px;
}

.cart-item__actions{
  display:flex;
  align-items:center;
  justify-content:center;
}

.cart-item__actions .cart-item__cta{
  width:36px;
  height:36px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;

  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
}

.cart-item__actions svg{
  width:16px;
  height:16px;
}




.nfs-cart-variant-line{
  margin-top: 6px;
}

.nfs-cart-variant-option{
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255,255,255,.78);
  font-weight: 700;
}






.nfs-cart-variant-line{
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  margin-top: 4px;
}

.nfs-cart-variant-option{
  display: block !important;
  width: 100% !important;
  line-height: 1.35;
}





#neon-frame-product-section .nfs-simple-price-pill:active{
  transform: translateY(2px) scale(0.98);

  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.45),
    0 1px 3px rgba(0,0,0,0.18);

  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease;
}




.nfs-label.nfs-simple-scope{
  text-shadow:
    -1.4px -2px 0 rgba(0,0,0,0.98),
     2px -2px 0 rgba(0,0,0,0.98),
    -2px  2px 0 rgba(0,0,0,0.98),
     2px  2px 0 rgba(0,0,0,0.98);
}




.nfs-processed-line{
  text-shadow:
    -1.4px -1px 0 rgba(0,0,0,0.98),
     1px -1px 0 rgba(0,0,0,0.98),
    -1px  1px 0 rgba(0,0,0,0.98),
     1px  1px 0 rgba(0,0,0,0.98);
}






.nfs-portrafy-photo-grid {
  display: flex;
  justify-content: center;
  gap: 14px;
}






.nfs-portrafy-template-section {
  width: 100%;
  max-width: 380px;
  margin: 18px auto;
  padding: 0 2px;
  position: relative;
}

.nfs-portrafy-zone-label {
  width: max-content;
  margin: 0 auto -13px;
  padding: 5px 14px;
  border-radius: 999px;
  background: #6f2bff;
  border: 1px solid rgba(255,255,255,0.8);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  position: relative;
  z-index: 2;
}

.nfs-portrafy-dotted-box {
  border: 2px dashed rgba(180, 120, 255, 0.95);
  border-radius: 18px;
  padding: 26px 16px 18px;
  background: rgba(10, 8, 18, 0.78);
  box-shadow:
    inset 0 0 18px rgba(111,43,255,0.16),
    0 0 22px rgba(111,43,255,0.18);
  text-align: center;
}

.nfs-portrafy-helper {
  color: rgba(255,255,255,0.75);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 2px;
}

.nfs-portrafy-helper-2 {
  color: rgba(255,255,255,0.75);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 12px;
}

.nfs-portrafy-text-input {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.35);
  color: #fff;
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.04em;
  outline: none;
  padding: 0 14px;
}

.nfs-portrafy-text-input::placeholder {
  color: rgba(255,255,255,0.45);
}

.nfs-portrafy-limit {
  margin-top: 10px;
  color: rgba(190,140,255,0.95);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}




.nfs-portrafy-car-section {
  width: 100%;
  max-width: 380px;
  margin: 2px auto;
  padding: 0 2px;
  position: relative;
}

.nfs-portrafy-car-label {
  width: max-content;
  margin: 0 auto -13px;
  padding: 5px 14px;
  border-radius: 999px;
  background: #6f2bff;
  border: 1px solid rgba(255,255,255,0.8);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  position: relative;
  z-index: 2;
}

.nfs-portrafy-car-box {
  border: 2px dashed rgba(180, 120, 255, 0.95);
  border-radius: 22px;
  padding: 30px 12px 22px;
  background: rgba(10, 8, 18, 0.78);
  box-shadow:
    inset 0 0 18px rgba(111,43,255,0.16),
    0 0 22px rgba(111,43,255,0.18);
  text-align: center;
}

.nfs-portrafy-car-kicker {
  color: rgba(190,140,255,0.95);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.nfs-portrafy-car-text {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  max-width: 310px;
  margin: 0 auto 18px;
}

.nfs-portrafy-car-silhouette {
  width: 100%;
  max-width: 240px;
  height: 110px;
  margin: 0 auto 16px;
  border-radius: 18px;
  border: 1.5px solid rgba(255,255,255,0.25);
  background: linear-gradient(180deg, rgba(111,43,255,0.18), rgba(0,0,0,0.35));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 58px;
  filter: grayscale(1);
}

.nfs-portrafy-car-note {
  color: rgba(255,255,255,0.88);
  font-size: 12px;
  font-weight: 800;
}




.nfs-portrafy-car-silhouette {
  width: 100%;
  max-width: 240px;
  height: 120px;
  margin: 0 auto 16px;

  border-radius: 18px;
  border: 1.5px dashed rgba(255,255,255,0.28);

  background:
    linear-gradient(
      180deg,
      rgba(111,43,255,0.18),
      rgba(0,0,0,0.35)
    );

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}

.nfs-portrafy-car-silhouette img {
  display: block;
  width: 78%;
  max-width: 180px;
  height: auto;
  object-fit: contain;
}



.nfs-portrafy-frame-shell {
  width: 100%;
  max-width: 430px;
  margin: 28px auto;
  padding: 40px;
  border-radius: 30px;
  background: linear-gradient(145deg, #2b2538, #090711);
  border: 3px solid rgba(255,255,255,0.22);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.18),
    inset 0 -8px 18px rgba(0,0,0,0.65),
    0 18px 50px rgba(0,0,0,0.55),
    0 0 28px rgba(111,43,255,0.22);
}

.nfs-portrafy-frame-inner {
  border-radius: 22px;
  padding: 18px 0;
  background:
    radial-gradient(circle at top, rgba(111,43,255,0.20), transparent 45%),
    #0b0814;
  border: 1.5px solid rgba(255,255,255,0.16);
  overflow: hidden;
}

.nfs-portrafy-frame-inner .nfs-portrafy-template-section,
.nfs-portrafy-frame-inner .nfs-portrafy-car-section {
  margin-left: auto;
  margin-right: auto;
}





#nfs-full-designer-pop .nfs-pop__title,
#nfs-full-designer-pop .nfs-pop__sub,
#nfs-full-designer-pop .nfs-pop__actions {
  text-align: center;
  justify-content: center;
}


.nfs-ai-led-placement-badge{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  flex-shrink:0;

  margin-top:7px;

  font-size:11px;
  font-weight:700;
  line-height:1;
  letter-spacing:.02px;

  background:#0e2de9;
  color:#fff;

  padding:3px 6px;
  border-radius:5px;
  white-space:nowrap;
}




.nfs-footer-badge--new{
  background: #ff2d2d;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
}


.nfs-footer-badge--green{
  background: #2E7D32;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
}

.nfs-footer-badge--cyan{
  background: #0891B2;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
}

.nfs-footer-badge--orange{
  background: #F97316;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
}








.nfs-read-more-action{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;

  margin-top:18px;
  padding:14px 12px;

  border:2px dashed rgba(255,255,255,0.58);
  border-radius:18px;

  background:rgba(255,255,255,0.03);

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 8px 30px rgba(0,0,0,0.25);

  text-align:center;

  backdrop-filter:blur(8px);
}







@media (min-width: 529px){

  .nfsCB-aiPreviewWrap{
    max-width:420px;
    margin:0 auto;
  }

}




.nfs-second-frame-offer {
  margin: 35px auto 0;
  width: fit-content;
  max-width: 92%;
  color: rgba(255,255,255,0.72);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;

  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.nfs-second-frame-offer strong {
  color: #ffffff;
  font-weight: 700;
}

.nfs-second-frame-emoji {
  opacity: .8;
  margin-right: 4px;
}




.nfs-second-frame-sub{
  margin-top:2px;
  font-size:12px;
  color:rgba(255,255,255,.65);
}