/*
Theme Name: WVC 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.15.26
Author: VibeCoding
Author URI: https://vibecoding.com
Theme URI: https://vibecoding.com
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)
   ========================= */
/* 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;
}