html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

:root {

  --primary-boxshadow: color(srgb 0.85 0.16 0.45 / 0.15);

  --footer-background: #7d1d60;

  --checkout-background: #13A6A2;
  --checkout-background-hover: #ADCF3F;

  --hamburger-menu-toogle: #C2C0C1;
  --hamburger-menu-toogle-hover: #7d1d60;

  --homepage-category-button: #DA3931;

  --product-card-cart: #7d1d60;
  --product-card-cart-hover: #7d1d60;

  --footer-top-border: #7d1d60;
  --footer-divider-border: #13A6A2;

  --homepage-features: #F1BB17;

  --header-user-avatar: #7d1d60;
  --header-cart-notification: #7d1d60;

  --homepage-category-active: #DA3931;

  --list-item-background: rgba(0, 0, 0, 0.03);

  --primary-background: var(--primary-background);
  --primary-background-hover: var(--primary-background-hover);

  --blue-text: #7d1d60;
  --red-background: #DA3931;
  --red-text: #DA3931;
  --yellow-border: #F1BB17;
  --yellow-text: #F1BB17;
  --yellow-background: #F1BB17;
  --tea-background: #12a5a1;
  --tea-background-100: #12a5a007;
  --tea-text: #12a5a1;
  --green-background: #ADCF3F;
  --green-background: #ADCF3F;
  --green-text: #ADCF3F;
}


.secondary-text {
  color: var(--secondary-text);
}

.secondary-text:hover {
  color: var(--secondary-text-hover);
}

.black-text:hover {
  color: var(--black-text-hover);
}

.secondary-background:hover {
  background: var(--secondary-background-hover);
}

.white-background {
  background: var(--white-background);
}

.primary-border {
  border-color: var(--primary-border);
}

.primary-border:hover {
  border-color: var(--primary-border-hover);
}

.secondary-border {
  border-color: var(--secondary-border);
}

.secondary-border:hover {
  border-color: var(--secondary-border-hover);
}


[data-theme="dark"] {}

*:focus {
  outline: none;
}


input[type="radio"] {
  --background: var(--primary-background);
}

input[type="checkbox"] {
  --primary-background: var(--primary-background);
}



.single-add-to-cart {
  background: var(--white-background) !important;
  width: 100%;
  color: var(--black-text);
  border: 2px solid var(--primary-border);
}

.single-add-to-cart:hover {
  background: #402489 !important;
  color: #FFFFFF;
  border: 2px solid #402489;
}


.black-text {
  color: var(--black-text);
}

.primary-text {
  color: var(--primary-text);
}

.primary-text:hover {
  color: var(--primary-text-hover);
}

.white-text {
  color: var(--white-text);
}

.white-text:hover {
  color: var(--white-text-hover);
}


.ring {
  box-shadow: 0 0 0 2px var(--ring);
}

.ring-focus:focus {
  box-shadow: 0 0 0 3px var(--ring-focus);
}

.focus-outline:focus {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

.focus-ring:focus {
  box-shadow: 0 0 0 3px var(--ring-focus);
  outline: none;
}

/* ACF-controlled focus ring variants */
.focus\:ring-primary:focus,
.focus\:primary-ring:focus {
  box-shadow: 0 0 0 1px var(--ring-focus, var(--primary-background));
  border-color: var(--ring-focus, var(--primary-background)) !important;
  outline: none;
}

.focus\:ring-secondary:focus,
.focus\:secondary-ring:focus {
  box-shadow: 0 0 0 3px var(--secondary-background);
  border-color: var(--secondary-background) !important;
  outline: none;
}

.focus-ring-2:focus {
  box-shadow: 0 0 0 2px var(--ring-focus, var(--primary-background));
  outline: none;
}

.focus-ring-4:focus {
  box-shadow: 0 0 0 4px var(--ring-focus, var(--primary-background));
  outline: none;
}

.focus-ring-primary-light:focus {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring-focus, var(--primary-background)) 20%, transparent);
  outline: none;
}

.focus-border-primary:focus {
  border-color: var(--ring-focus, var(--primary-background)) !important;
}

/* Checkbox and radio focus styles using new classes */
input[type="checkbox"].focus\:primary-ring:focus,
input[type="radio"].focus\:primary-ring:focus,
input[type="checkbox"].focus-ring-primary:focus,
input[type="radio"].focus-ring-primary:focus {
  box-shadow: 0 0 0 3px var(--ring-focus, var(--primary-background));
  outline: none;
}

/* Toggle switch focus style */
.peer-focus\:primary-ring:focus~.toggle-visual {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring-focus, var(--primary-background)) 30%, transparent);
}


.shadow-primary-sm {
  box-shadow: 0 1px 2px var(--shadow-color);
}

.shadow-primary-sm {
  box-shadow: 0 4px 6px -1px var(--shadow-color);
}

.shadow-primary-md {
  box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
}

.shadow-primary-lg {
  box-shadow: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color);
}

.shadow-primary-xl {
  box-shadow: 0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color);
}

.shadow-primary:hover,
.shadow-primary-hover:hover {
  box-shadow: 0 10px 15px -3px var(--shadow-color-hover), 0 4px 6px -4px var(--shadow-color-hover);
}

.shadow-secondary {
  box-shadow: 0 4px 6px -1px var(--secondary-shadow-color);
}

.shadow-secondary-lg {
  box-shadow: 0 10px 15px -3px var(--secondary-shadow-color), 0 4px 6px -4px var(--secondary-shadow-color);
}

.shadow-secondary:hover,
.shadow-secondary-hover:hover {
  box-shadow: 0 10px 15px -3px var(--secondary-shadow-color-hover), 0 4px 6px -4px var(--secondary-shadow-color-hover);
}

.primary-background {
  background: var(--primary-background);
}

.secondary-background {
  background: var(--secondary-background);
}

.primary-background-hover {
  background: var(--primary-background-hover);
}

.primary-button {
  background: var(--primary-background) !important;
  color: var(--secondary-text);
  text-align: center;
  align-items: center;
  width: 100%;
  height: 50px;
}

.secondary-button {
  background: var(--secondary-background) !important;
  color: var(--secondary-text);
  text-align: center;
  align-items: center;
  width: 100%;
  height: 50px;
}

.primary-border-sm {
  border: 1px solid var(--primary-border);
}

.primary-border-md {
  border: 2px solid var(--primary-border);
}

.primary-border-lg {
  border: 3px solid var(--primary-border);
}

.primary-border-xl {
  border: 5px solid var(--primary-border);
}

.secondary-border-sm {
  border: 1px solid var(--secondary-border);
}

.secondary-border-md {
  border: 2px solid var(--secondary-border);
}

.secondary-border-lg {
  border: 3px solid var(--secondary-border);
}

.secondary-border-xl {
  border: 5px solid var(--secondary-border);
}


.checkout-background {
  background: var(--checkout-background);
}

.checkout-background:hover {
  background: var(--checkout-background-hover);
}

.footer-background {
  background: var(--footer-background);
}

.list-item-background {
  background: var(--list-item-background);
}

.checkout-continue {
  background: #402489;
}

.homepage-features {
  background: var(--homepage-features);
}

.homepage-features-text {
  color: var(--homepage-features);
}


.bg-yellow-squarepancake {
  background: var(--yellow-background);
}

.yellow-text {
  color: var(--yellow-text);
}

. {
  background: var(--tea-background);
}

.-100 {
  background: var(--tea-background-100);
}

.tea-text {
  color: var(--tea-text);
}

.tertiary-background {
  background: var(--green-background);
}

.green-text {
  color: var(--green-text);
}


.primary-background {
  background: var(--primary-background);
}

.primary-background {
  background: var(--primary-background);
}

.blue-text {
  color: var(--blue-text);
}

.bg-red-squarepancake {
  background: var(--red-background)
}

.red-text {
  color: var(--red-text);
}

.pink-border {
  border-color: var(--primary-background)
}