/*
Theme Name: 22 Pixels Theme
Description: A modern, responsive WordPress vibecoding theme built with React components, Radix UI primitives, and CSS custom properties. Features a comprehensive design system with CSS custom properties, dark mode support, accessibility compliance, and SEO optimization.
Version: 1.19.31
Author: 22 Pixels
Author URI: Vibecoding
Theme URI: Vibecoding
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wvc-theme
Domain Path: /languages
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.4
Tags:
*/
/* =========================
   WooCommerce color overrides
   (colors only, with !important)
   ========================= */

@import url('https://fonts.googleapis.com/css2?family=Open%20Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Georgia%2C%20serif&display=swap');
@import url('https://fonts.googleapis.com/css2?family=monospace&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* 1) Override WooCommerce CSS variables (global) */
:root {
  --woocommerce: var(--color-primary) !important;

  --wc-primary: var(--color-primary) !important;
  --wc-primary-text: var(--color-primary-foreground) !important;

  --wc-secondary: var(--color-secondary) !important;
  --wc-secondary-text: var(--color-secondary-foreground) !important;

  --wc-highlight: var(--color-accent) !important;
  --wc-highlight-text: var(--color-accent-foreground) !important;

  --wc-content-bg: var(--color-surface) !important;
  --wc-subtext: var(--color-muted-foreground) !important;

  --wc-form-border-color: var(--color-border) !important;
  --wc-form-color-background: var(--color-surface) !important;
  --wc-form-color-text: var(--color-foreground) !important;
}

/* 2) Buttons */
.wvc-woocommerce a.button,
.wvc-woocommerce button.button,
.wvc-woocommerce input.button,
.wvc-woocommerce #respond input#submit {
  background-color: var(--color-secondary) !important;
  color: var(--color-secondary-foreground) !important;
}

.wvc-woocommerce a.button:hover,
.wvc-woocommerce button.button:hover,
.wvc-woocommerce input.button:hover,
.wvc-woocommerce #respond input#submit:hover {
  background-color: var(--color-secondary-hover, var(--color-secondary)) !important;
  color: var(--color-secondary-foreground) !important;
}

/* Primary buttons */
.wvc-woocommerce a.button.alt,
.wvc-woocommerce button.button.alt,
.wvc-woocommerce input.button.alt,
.wvc-woocommerce #respond input#submit.alt,
.wvc-woocommerce #add_payment_method .wc-proceed-to-checkout a.checkout-button,
.wvc-woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.wvc-woocommerce-checkout .wc-proceed-to-checkout a.checkout-button {
  background-color: var(--color-primary) !important;
  color: var(--color-primary-foreground) !important;
}

.wvc-woocommerce a.button.alt:hover,
.wvc-woocommerce button.button.alt:hover,
.wvc-woocommerce input.button.alt:hover,
.wvc-woocommerce #respond input#submit.alt:hover,
.wvc-woocommerce #add_payment_method .wc-proceed-to-checkout a.checkout-button:hover,
.wvc-woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.wvc-woocommerce-checkout .wc-proceed-to-checkout a.checkout-button:hover {
  background-color: var(--color-primary-hover, var(--color-primary)) !important;
  color: var(--color-primary-foreground) !important;
}

/* WooCommerce block cart submit button (Tailwind-like primary button) */
.wvc-woocommerce .wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained,
.wvc-woocommerce .wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 2.5rem !important; /* h-10 */
  padding: 0.5rem 1rem !important; /* px-4 py-2 */
  border: 1px solid transparent !important;
  border-radius: 0;
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important; /* font-medium */
  line-height: 1.25rem !important;
  text-decoration: none !important;
  transition: background-color 150ms ease, box-shadow 150ms ease, opacity 150ms ease !important;
}

.wvc-woocommerce .wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained:hover,
.wvc-woocommerce .wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained:hover {
  background-color: color-mix(in srgb, var(--primary) 90%, transparent) !important;
  color: var(--primary-foreground) !important;
}

.wvc-woocommerce .wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained:focus-visible,
.wvc-woocommerce .wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--primary) !important;
}

.wvc-woocommerce .wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained:disabled,
.wvc-woocommerce .wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained[aria-disabled="true"],
.wvc-woocommerce .wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained:disabled,
.wvc-woocommerce .wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained[aria-disabled="true"] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Disabled buttons */
.wvc-woocommerce a.button:disabled,
.wvc-woocommerce button.button:disabled,
.wvc-woocommerce input.button:disabled,
.wvc-woocommerce #respond input#submit:disabled,
.wvc-woocommerce a.button.disabled,
.wvc-woocommerce button.button.disabled,
.wvc-woocommerce input.button.disabled {
  background-color: var(--color-secondary) !important;
  color: var(--color-secondary-foreground) !important;
}

/* 3) Notices */
.wvc-woocommerce-message,
.wvc-woocommerce-info,
.wvc-woocommerce-error {
  background-color: var(--color-surface) !important;
  color: var(--color-foreground) !important;
}

.wvc-woocommerce-message { border-top-color: var(--wc-green, var(--color-success, var(--color-primary))) !important; }
.wvc-woocommerce-info    { border-top-color: var(--wc-blue,  var(--color-info,    var(--color-primary))) !important; }
.wvc-woocommerce-error   { border-top-color: var(--wc-red,   var(--color-danger,  var(--color-primary))) !important; }

.wvc-woocommerce-message::before { color: var(--wc-green, var(--color-success, var(--color-primary))) !important; }
.wvc-woocommerce-info::before    { color: var(--wc-blue,  var(--color-info,    var(--color-primary))) !important; }
.wvc-woocommerce-error::before   { color: var(--wc-red,   var(--color-danger,  var(--color-primary))) !important; }

/* 4) Sale badge */
.wvc-woocommerce span.onsale {
  background-color: var(--wc-highlight, var(--color-accent)) !important;
  color: var(--wc-highlight-text, var(--color-accent-foreground)) !important;
}

/* 5) Remove link */
.wvc-woocommerce a.remove {
  color: var(--wc-red, var(--color-danger, #a00)) !important;
}
.wvc-woocommerce a.remove:hover {
  background-color: var(--wc-red, var(--color-danger, #a00)) !important;
  color: var(--color-surface, #fff) !important;
}

/* 6) Product price */
.wvc-woocommerce div.product p.price,
.wvc-woocommerce div.product span.price,
.wvc-woocommerce ul.products li.product .price {
  color: var(--wc-highlight, var(--color-accent)) !important;
}

/* 7) Store notice */
.wvc-woocommerce-store-notice,
.wvc-woocommerce p.demo_store {
  background-color: var(--wc-primary, var(--color-primary)) !important;
  color: var(--wc-primary-text, var(--color-primary-foreground)) !important;
}
.wvc-woocommerce-store-notice a,
.wvc-woocommerce p.demo_store a {
  color: var(--wc-primary-text, var(--color-primary-foreground)) !important;
}

/* 8) Checkout payment box */
.wvc-woocommerce-checkout #payment div.payment_box,
.wvc-woocommerce #add_payment_method #payment div.payment_box {
  background-color: var(--color-surface) !important;
  color: var(--color-foreground) !important;
}
.wvc-woocommerce-checkout #payment div.payment_box::before,
.wvc-woocommerce #add_payment_method #payment div.payment_box::before {
  border-bottom-color: var(--color-surface) !important;
}

/* 9) WooCommerce block text inputs: reset to Tailwind-like defaults */
.wc-block-components-form .wc-block-components-text-input input[type="email"],
.wc-block-components-form .wc-block-components-text-input input[type="number"],
.wc-block-components-form .wc-block-components-text-input input[type="password"],
.wc-block-components-form .wc-block-components-text-input input[type="tel"],
.wc-block-components-form .wc-block-components-text-input input[type="text"],
.wc-block-components-form .wc-block-components-text-input input[type="url"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="url"],
.wc-block-components-textarea {
  color: var(--foreground, var(--color-foreground, inherit)) !important;
  background-color: var(--background, var(--color-background, inherit)) !important;
  border-color: var(--input, var(--color-input, var(--color-border, currentColor))) !important;
}

.wc-block-components-form .wc-block-components-text-input input[type="email"]::placeholder,
.wc-block-components-form .wc-block-components-text-input input[type="number"]::placeholder,
.wc-block-components-form .wc-block-components-text-input input[type="password"]::placeholder,
.wc-block-components-form .wc-block-components-text-input input[type="tel"]::placeholder,
.wc-block-components-form .wc-block-components-text-input input[type="text"]::placeholder,
.wc-block-components-form .wc-block-components-text-input input[type="url"]::placeholder,
.wc-block-components-text-input input[type="email"]::placeholder,
.wc-block-components-text-input input[type="number"]::placeholder,
.wc-block-components-text-input input[type="password"]::placeholder,
.wc-block-components-text-input input[type="tel"]::placeholder,
.wc-block-components-text-input input[type="text"]::placeholder,
.wc-block-components-text-input input[type="url"]::placeholder,
.wc-block-components-textarea::placeholder {
  color: var(--color-muted-foreground, currentColor) !important;
}

.wc-block-components-form .wc-block-components-text-input input[type="email"]:focus,
.wc-block-components-form .wc-block-components-text-input input[type="number"]:focus,
.wc-block-components-form .wc-block-components-text-input input[type="password"]:focus,
.wc-block-components-form .wc-block-components-text-input input[type="tel"]:focus,
.wc-block-components-form .wc-block-components-text-input input[type="text"]:focus,
.wc-block-components-form .wc-block-components-text-input input[type="url"]:focus,
.wc-block-components-text-input input[type="email"]:focus,
.wc-block-components-text-input input[type="number"]:focus,
.wc-block-components-text-input input[type="password"]:focus,
.wc-block-components-text-input input[type="tel"]:focus,
.wc-block-components-text-input input[type="text"]:focus,
.wc-block-components-text-input input[type="url"]:focus,
.wc-block-components-textarea:focus {
  border-color: var(--color-ring, var(--primary)) !important;
  box-shadow: 0 0 0 1px var(--color-ring, var(--primary)) !important;
  outline: none !important;
}

/* WooCommerce block selects: match text input styles */
.wc-blocks-components-select__select {
  color: var(--foreground, var(--color-foreground, inherit)) !important;
  background-color: var(--background, var(--color-background, inherit)) !important;
  border-color: var(--input, var(--color-input, var(--color-border, currentColor))) !important;
}

.wc-blocks-components-select__select:focus {
  border-color: var(--color-ring, var(--primary)) !important;
  box-shadow: 0 0 0 1px var(--color-ring, var(--primary)) !important;
  outline: none !important;
}

/* WooCommerce block radio inputs: match form control theme */
.wc-block-components-radio-control__input {
  color: var(--primary, var(--color-primary, currentColor)) !important;
  background-color: var(--background, var(--color-background, inherit)) !important;
  border-color: var(--input, var(--color-input, var(--color-border, currentColor))) !important;
  accent-color: var(--primary, var(--color-primary, currentColor)) !important;
  padding: 0 !important;
  padding-block: 0 !important;
  padding-inline: 0 !important;
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem !important;
  min-height: 1rem !important;
  line-height: 1 !important;
  border-radius: 9999px !important;
}

.wc-block-components-radio-control__input:focus {
  border-color: var(--color-ring, var(--primary)) !important;
  box-shadow: 0 0 0 1px var(--color-ring, var(--primary)) !important;
  outline: none !important;
}

.wc-block-components-radio-control__input:checked {
  border-color: var(--primary, var(--color-primary, currentColor)) !important;
  background-color: var(--background, var(--color-background, inherit)) !important;
}

/* WooCommerce block checkbox inputs: match form control theme */
.wc-block-components-checkbox__input,
.wc-block-components-checkbox input[type="checkbox"] {
  color: var(--primary, var(--color-primary, currentColor)) !important;
  background-color: var(--background, var(--color-background, inherit)) !important;
  border-color: var(--input, var(--color-input, var(--color-border, currentColor))) !important;
  accent-color: var(--primary, var(--color-primary, currentColor)) !important;
  padding: 0 !important;
  padding-block: 0 !important;
  padding-inline: 0 !important;
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem !important;
  min-height: 1rem !important;
  line-height: 1 !important;
  border-radius: 0.25rem !important;
}

.wc-block-components-checkbox__input:focus,
.wc-block-components-checkbox input[type="checkbox"]:focus {
  border-color: var(--color-ring, var(--primary)) !important;
  box-shadow: 0 0 0 1px var(--color-ring, var(--primary)) !important;
  outline: none !important;
}


/* =========================
   1. HEADINGS (h1-h6)
   ========================= */

/* h1 */
.prose h1,
.prose.prose-slate h1,
.card-content .prose h1,
.card-content h1 {
  font-weight: 700; /* font-bold in Tailwind */
  font-size: 2rem; /* 32px - between text-3xl (1.875rem) and text-4xl (2.25rem) */
  line-height: 2.25rem; /* leading-tight (1.25 * 2rem = 2.5rem, using 2.25rem) */
  margin-top: 0;
  margin-bottom: 1rem; /* mb-4 in Tailwind */
  display: block;
}

/* h2 */
.prose h2,
.prose.prose-slate h2,
.card-content .prose h2,
.card-content h2 {
  font-weight: 600; /* font-semibold in Tailwind */
  font-size: 1.25rem; /* text-xl in Tailwind (20px) */
  line-height: 1.75rem; /* text-xl default line-height in Tailwind (28px) */
  margin-top: 1.5rem; /* mt-6 in Tailwind */
  margin-bottom: 0.75rem; /* mb-3 in Tailwind */
  display: block;
}

.prose h2:first-child,
.prose.prose-slate h2:first-child,
.card-content .prose h2:first-child,
.card-content h2:first-child,
h2:first-child {
  margin-top: 0;
}

/* h3 */
.prose h3,
.prose.prose-slate h3,
.card-content .prose h3,
.card-content h3 {
  font-weight: 600; /* font-semibold in Tailwind */
  font-size: 1.25rem; /* text-xl in Tailwind (20px) */
  line-height: 1.75rem; /* text-xl default line-height in Tailwind (28px) */
  margin-top: 1.5rem; /* mt-6 in Tailwind */
  margin-bottom: 0.5rem; /* mb-2 in Tailwind */
  display: block;
}

/* h4 */
.prose h4,
.prose.prose-slate h4,
.card-content .prose h4,
.card-content h4 {
  font-weight: 600; /* font-semibold in Tailwind */
  font-size: 1.125rem; /* text-lg in Tailwind (18px) */
  line-height: 1.75rem; /* text-lg default line-height in Tailwind (28px) */
  margin-top: 1rem; /* mt-4 in Tailwind */
  margin-bottom: 0.5rem; /* mb-2 in Tailwind */
  display: block;
}

/* h5 */
.prose h5,
.prose.prose-slate h5,
.card-content .prose h5,
.card-content h5 {
  font-weight: 600; /* font-semibold in Tailwind */
  font-size: 1rem; /* text-base in Tailwind (16px) */
  line-height: 1.5rem; /* text-base default line-height in Tailwind (24px) */
  margin-top: 0.75rem; /* mt-3 in Tailwind */
  margin-bottom: 0.5rem; /* mb-2 in Tailwind */
  display: block;
}

/* h6 */
.prose h6,
.prose.prose-slate h6,
.card-content .prose h6,
.card-content h6 {
  font-weight: 600; /* font-semibold in Tailwind */
  font-size: 0.875rem; /* text-sm in Tailwind (14px) */
  line-height: 1.25rem; /* text-sm default line-height in Tailwind (20px) */
  margin-top: 0.75rem; /* mt-3 in Tailwind */
  margin-bottom: 0.5rem; /* mb-2 in Tailwind */
  display: block;
}

/* =========================
   2. PARAGRAPHS
   ========================= */
.prose p,
.prose.prose-slate p,
.card-content .prose p,
.card-content p {
  margin-top: 0.75rem; /* mt-3 in Tailwind */
  margin-bottom: 0.75rem; /* mb-3 in Tailwind */
  line-height: 1.625; /* leading-relaxed in Tailwind */
}

/* =========================
   3. LISTS
   ========================= */

/* Unordered Lists (ul) - Only in prose/card-content contexts */
.prose ul,
.prose.prose-slate ul,
.card-content .prose ul,
.card-content ul {
  list-style: disc;
  list-style-type: disc;
  list-style-image: none;
  padding-left: 1.5rem; /* pl-6 in Tailwind */
  margin-top: 0.75rem; /* mt-3 in Tailwind */
  margin-bottom: 1rem; /* mb-4 in Tailwind */
}

.prose ul li,
.prose.prose-slate ul li,
.card-content .prose ul li,
.card-content ul li {
  display: list-item;
  list-style: disc;
  list-style-type: disc;
  list-style-position: outside;
  margin-top: 0.375rem; /* mt-1.5 in Tailwind (0.375rem = 6px) */
  margin-bottom: 0.375rem; /* mb-1.5 in Tailwind */
  padding-left: 0.25rem; /* pl-1 in Tailwind */
}

.prose ul li::marker,
.prose.prose-slate ul li::marker,
.card-content .prose ul li::marker,
.card-content ul li::marker {
  color: inherit;
  font-size: 1em;
}

/* Ordered Lists (ol) - Only in prose/card-content contexts */
.prose ol,
.prose.prose-slate ol,
.card-content .prose ol,
.card-content ol {
  list-style-type: decimal;
  list-style-position: outside;
  padding-left: 1.5rem; /* pl-6 in Tailwind */
  margin-top: 0.75rem; /* mt-3 in Tailwind */
  margin-bottom: 1rem; /* mb-4 in Tailwind */
}

.prose ol li,
.prose.prose-slate ol li,
.card-content .prose ol li,
.card-content ol li {
  display: list-item;
  list-style-type: decimal;
  list-style-position: outside;
  margin-top: 0.375rem; /* mt-1.5 in Tailwind (0.375rem = 6px) */
  margin-bottom: 0.375rem; /* mb-1.5 in Tailwind */
  padding-left: 0.25rem; /* pl-1 in Tailwind */
}

/* =========================
   4. TEXT FORMATTING
   ========================= */

/* Bold / Strong */
.prose strong,
.prose.prose-slate strong,
.card-content .prose strong,
.card-content strong,
strong,
.prose b,
.prose.prose-slate b,
.card-content .prose b,
.card-content b {
  font-weight: 700; /* font-bold in Tailwind */
}

/* Italic / Emphasis */
.prose em,
.prose.prose-slate em,
.card-content .prose em,
.card-content em,
em,
.prose i,
.prose.prose-slate i,
.card-content .prose i,
.card-content i {
  font-style: italic;
}

/* =========================
   5. LINKS
   ========================= */
.prose a,
.prose.prose-slate a,
.card-content .prose a,
.card-content a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

.prose a:hover,
.prose.prose-slate a:hover,
.card-content .prose a:hover,
.card-content a:hover {
  color: var(--color-primary-hover, var(--color-primary));
}


/* =========================
   7. BLOCKQUOTE
   ========================= */
.prose blockquote,
.prose.prose-slate blockquote,
.card-content .prose blockquote,
.card-content blockquote {
  margin: 1.5rem 0 1.5rem 1.5rem; /* my-6 ml-6 in Tailwind */
  padding-left: 1rem; /* pl-4 in Tailwind */
  border-left: 4px solid var(--color-border); /* border-l-4 in Tailwind */
  font-style: italic;
  color: var(--color-muted-foreground);
}

/* =========================
   8. HORIZONTAL RULE
   ========================= */
.prose hr,
.prose.prose-slate hr,
.card-content .prose hr,
.card-content hr {
  border: 0;
  border-top: 1px solid var(--color-border); /* border-t in Tailwind */
  margin: 2rem 0; /* my-8 in Tailwind */
}


/* woocommerce reset styles */

.checkout.woocommerce-checkout{
  grid-template-columns:auto;
}

wrapper[data-processed="true"]{
  display: none !important;
}

/* CF7 styles */

.nomoco-order-form {
  display: grid;
  gap: 18px;
}

.nomoco-order-form p {
  margin: 0;
}

.nomoco-order-form br {
  display: none;
}

.nomoco-order-form label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}

.nomoco-order-form .wpcf7-form-control-wrap {
  display: block;
  margin-top: 8px;
}

.nomoco-order-form input[type="text"],
.nomoco-order-form input[type="email"],
.nomoco-order-form input[type="tel"],
.nomoco-order-form input[type="number"],
.nomoco-order-form select,
.nomoco-order-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;

  background-color: oklab(0.966762 -0.000504196 -0.00570756 / 0.3);
  color: rgb(74, 97, 130);

  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 2px solid oklab(0.414861 -0.0100682 -0.180904 / 0.2);

  border-radius: 6px 6px 0 0;

  padding: 4px 16px;

  box-shadow:
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(20, 21, 31, 0.12) 0px 2px 4px 0px;

  outline: none;
  transition-property: color, box-shadow, border-color, background-color;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.nomoco-order-form textarea {
  min-height: 140px;
  padding-top: 12px;
  resize: vertical;
}

.nomoco-order-form select {
  appearance: auto;
  cursor: pointer;
}

.nomoco-order-form input:focus,
.nomoco-order-form select:focus,
.nomoco-order-form textarea:focus {
  border-bottom-color: var(--primary);
  box-shadow:
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    oklab(0.485286 -0.0128541 -0.216589 / 0.2) 0px 0px 0px 3px,
    rgba(20, 21, 31, 0.12) 0px 2px 4px 0px;
}

.nomoco-order-form input::placeholder,
.nomoco-order-form textarea::placeholder {
  color: var(--muted-foreground);
  opacity: 0.75;
}

.nomoco-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.nomoco-order-form .wpcf7-submit {
  width: auto;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--primary);
  color: #fff;

  border: 0;
  border-radius: 6px;

  padding: 0 32px;

  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.nomoco-order-form .wpcf7-submit:hover {
  background: color-mix(in oklab, var(--primary) 90%, black);
}

.nomoco-order-form .wpcf7-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.nomoco-order-form .wpcf7-spinner {
  margin-left: 12px;
}

.nomoco-order-form .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--destructive);
}

.nomoco-order-form .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 14px 16px;
  border-radius: 6px;
  font-size: 14px;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-radius: 5px;
    padding: 20px;
}

@media (max-width: 640px) {
  .nomoco-row {
    grid-template-columns: 1fr;
  }

  .nomoco-order-form .wpcf7-submit {
    width: 100%;
  }
}

form[data-status="sent"] .nomoco-order-form {
	display:none;
}

button.ring-offset-background.focus\:ring-ring.data-\[state\=open\]\:bg-secondary.absolute.top-4.right-4.rounded-xs.opacity-70.transition-opacity.hover\:opacity-100.focus\:ring-2.focus\:ring-offset-2.focus\:outline-hidden.disabled\:pointer-events-none {
    display: none !important;
}