/*
Theme Name: Valar Peptides Exact Replica
Description: Exact replica of the original Valar Peptides design
Version: 1.0
*/

/* ============================================= */
/* CSS Variables - Primary Colors */
/* ============================================= */
:root {
    --primary-purple: rgb(57, 37, 138);
    --primary-purple-hover: rgb(47, 27, 118); /* Slightly darker for hover states */
}

/* Global: Remove underlines from all links */
a {
    text-decoration: none !important;
}

a:hover {
    text-decoration: none !important;
}

/* Only add underline for specific links that need it */
a.text-underline,
a.hover\:underline:hover {
    text-decoration: underline !important;
}

/* Font Face Declarations - Exact from original */
@font-face {
  font-family: 'CircularStd';
  src: url('./fonts/CircularStd-Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CircularStd';
  src: url('./fonts/CircularStd-BookItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'CircularStd';
  src: url('./fonts/CircularStd-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CircularStd';
  src: url('./fonts/CircularStd-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'CircularStd';
  src: url('./fonts/CircularStd-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CircularStd';
  src: url('./fonts/CircularStd-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'CircularStd';
  src: url('./fonts/CircularStd-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CircularStd';
  src: url('./fonts/CircularStd-BlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'CircularStd';
  src: url('./fonts/CircularStd-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* CSS Variables - Exact from original */
:root {
  /* Valar color scheme */
  --color-primary-50: 245, 242, 250;
  --color-primary-100: 225, 219, 244;
  --color-primary-200: 194, 178, 232;
  --color-primary-300: 163, 138, 221;
  --color-primary-400: 132, 97, 208;
  --color-primary-500: 57, 37, 138;
  --color-primary-600: 51, 31, 122;
  --color-primary-700: 44, 26, 106;
  --color-primary-800: 36, 17, 90;
  --color-primary-900: 28, 10, 73;

  /* Secondary colors - Vibrant accent colors */
  --color-secondary-pink: 236, 72, 153;    /* pink-500 */
  --color-secondary-teal: 20, 184, 166;    /* teal-500 */
  --color-secondary-blue: 59, 130, 246;    /* blue-500 */
  --color-secondary-orange: 251, 146, 60;  /* orange-400 */
  --color-secondary-green: 34, 197, 94;    /* green-500 */

  /* Gray scale */
  --color-gray-50: 249, 250, 251;
  --color-gray-100: 243, 244, 246;
  --color-gray-200: 229, 231, 235;
  --color-gray-300: 209, 213, 219;
  --color-gray-400: 156, 163, 175;
  --color-gray-500: 107, 114, 128;
  --color-gray-600: 75, 85, 99;
  --color-gray-700: 55, 65, 81;
  --color-gray-800: 31, 41, 55;
  --color-gray-900: 17, 24, 39;

  /* Base colors */
  --color-background: 255, 255, 255;
  --color-surface: 255, 255, 255;
  --color-text: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-border: var(--color-gray-200);
}

/* Reset and Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  transition: color 0.2s ease;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: rgb(var(--color-text));
  background-color: rgb(var(--color-background));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Override WordPress default link styles */
.site-header a,
.main-navigation a,
.nav-menu a,
.shop-dropdown button,
.account-link {
  color: rgb(75, 85, 99) !important;
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.site-header a:hover,
.main-navigation a:hover,
.nav-menu a:hover,
.shop-dropdown button:hover,
.account-link:hover {
  color: rgb(17, 24, 39) !important;
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'CircularStd', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Header Styles - Exact replica */
.site-header {
  background: white;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 0.75rem; /* Mobile: 12px */
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3rem; /* Mobile: 48px */
}

@media (min-width: 768px) {
  .header-container {
    padding: 0 1rem; /* Desktop: 16px */
    height: 3.5rem; /* Desktop: 56px */
  }
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.site-logo img {
  height: auto;
  width: 13rem; /* 208px - matches w-52 */
}

/* Navigation */
.main-navigation {
  display: none;
}

@media (min-width: 768px) {
  .main-navigation {
    display: flex;
    align-items: center;
    gap: 2rem; /* space-x-8 = 2rem */
  }
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2rem; /* space-x-8 = 2rem */
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu a {
  color: rgb(75, 85, 99) !important; /* gray-600 exact - force override */
  text-decoration: none !important; /* force no underline */
  font-weight: 500;
  font-size: 1rem; /* explicit font size */
  transition: color 0.2s ease;
  border-bottom: none !important; /* ensure no underline */
}

.nav-menu a:hover {
  color: rgb(17, 24, 39) !important; /* gray-900 exact - force override */
  text-decoration: none !important;
}

/* Shop Dropdown */
.shop-dropdown {
  position: relative;
}

.shop-dropdown button {
  display: flex;
  align-items: center;
  color: rgb(75, 85, 99) !important; /* gray-600 exact - force override */
  background: none;
  border: none;
  font-weight: 500;
  font-size: 1rem; /* explicit font size */
  cursor: pointer;
  transition: color 0.2s ease;
  text-decoration: none !important;
}

.shop-dropdown button:hover {
  color: rgb(17, 24, 39) !important; /* gray-900 exact - force override */
  text-decoration: none !important;
}

.dropdown-menu {
  position: absolute;
  left: 0;
  margin-top: 0.5rem;
  width: 12rem;
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 50;
}

.shop-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
}

.dropdown-menu a {
  display: block;
  padding: 0.5rem 1rem;
  color: rgb(55, 65, 81); /* gray-700 exact */
  text-decoration: none;
  font-size: 0.875rem;
  transition: background-color 0.2s ease;
}

.dropdown-menu a:hover {
  background-color: rgb(243, 244, 246); /* gray-100 exact */
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.search-container {
  display: none;
}

@media (min-width: 1024px) {
  .search-container {
    display: block;
  }
}

.account-link {
  color: rgb(75, 85, 99) !important; /* gray-600 exact - force override */
  text-decoration: none !important;
  font-weight: 500;
  font-size: 1rem; /* explicit font size */
  transition: color 0.2s ease;
  border-bottom: none !important;
}

.account-link:hover {
  color: rgb(17, 24, 39) !important; /* gray-900 exact - force override */
  text-decoration: none !important;
}

/* Cart Link */
.cart-link {
  color: rgb(75, 85, 99) !important;
  text-decoration: none !important;
  position: relative;
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
}

.cart-link:hover {
  color: rgb(17, 24, 39) !important;
  text-decoration: none !important;
}

.cart-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: rgb(57, 37, 138);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
  min-width: 1.25rem;
  text-align: center;
  line-height: 1;
}

/* Add to Cart Button Loading State */
.add_to_cart_button.loading {
  opacity: 0.6;
  cursor: wait;
  position: relative;
}

.add_to_cart_button.loading:after {
  content: "...";
  position: absolute;
  right: 15px;
  animation: dots 1.5s infinite;
}

@keyframes dots {
  0%, 20% {
    content: ".";
  }
  40% {
    content: "..";
  }
  60%, 100% {
    content: "...";
  }
}

.add_to_cart_button.added,
.btn-primary.added,
.single_add_to_cart_button.added {
  /* Keep the same color, just change opacity */
  opacity: 0.9;
}

/* Button cursor styles */
.add_to_cart_button,
.ajax_add_to_cart,
.single_add_to_cart_button,
button[type="button"],
button[type="submit"] {
  cursor: pointer !important;
  outline: none !important;
}

/* Remove ALL outlines from Add to Cart buttons */
.add_to_cart_button,
.ajax_add_to_cart,
.single_add_to_cart_button,
.product-card button,
.product-card .button,
button.add_to_cart_button,
a.add_to_cart_button {
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  box-shadow: none !important;
}

.add_to_cart_button:focus,
.ajax_add_to_cart:focus,
.single_add_to_cart_button:focus,
.product-card button:focus,
.product-card .button:focus,
button.add_to_cart_button:focus,
a.add_to_cart_button:focus {
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  box-shadow: none !important;
}

.add_to_cart_button:active,
.ajax_add_to_cart:active,
.single_add_to_cart_button:active,
.product-card button:active,
.product-card .button:active {
  outline: none !important;
  box-shadow: none !important;
}

.add_to_cart_button.loading,
.ajax_add_to_cart.loading,
.single_add_to_cart_button.loading,
.btn-primary.loading {
  cursor: wait !important;
  opacity: 0.7;
}

.add_to_cart_button:disabled,
.ajax_add_to_cart:disabled,
.single_add_to_cart_button:disabled {
  cursor: not-allowed !important;
}

/* Hide WooCommerce's auto-added "View cart" link */
.added_to_cart {
  display: none !important;
}

/* ========================================
   UNIFIED PRODUCT CARD COMPONENT STYLES
   ======================================== */

/* Product Card Container */
.product-card {
  background: white;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  min-width: 0; /* Prevent overflow in grid */
}

.product-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Product Card Image Wrapper */
.product-card-image-wrapper {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.product-card-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.product-card:hover .product-card-image {
  transform: scale(1.05);
}

/* Product Card Placeholder (when no image) */
.product-card-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
}

.product-card-placeholder-icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.product-card-placeholder-text {
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  max-width: 150px;
}

/* Product Card Badges Container */
.product-card-badges {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0.75rem;
  pointer-events: none;
  z-index: 2;
}

.product-card-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  pointer-events: auto;
}

.product-card-badge-stock {
  background: rgba(236, 253, 245, 0.95);
  color: #047857;
}

.product-card-badge-stock.out-of-stock {
  background: rgba(254, 242, 242, 0.95);
  color: #dc2626;
}

.product-card-badge-purity {
  background: rgba(237, 233, 254, 0.95);
  color: #6366f1;
}

/* Product Card Content */
.product-card-content {
  padding: 0 1rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.product-card-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.5rem;
  line-height: 1.4;
  transition: color 0.2s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card:hover .product-card-title {
  color: var(--primary-purple);
}

.product-card-description {
  font-size: 0.8rem;
  color: #6b7280;
  line-height: 1.5;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 1rem;
}

.product-card-price .amount {
  color: inherit;
}

/* Product Card Stock Status */
.product-card-stock {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.product-card-stock.in-stock {
  color: rgb(34, 197, 94);
}

.product-card-stock.out-of-stock {
  color: rgb(239, 68, 68);
}

.product-card-stock-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: currentColor;
}

/* Product Card Actions */
.product-card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
  padding: 0 1rem 1rem;
}

/* Product Card Buttons - Base Styles */
.product-card-btn,
.product-card-button {
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 10px;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: block;
  text-decoration: none;
  display: block;
  line-height: 1.5;
  outline: none !important;
  outline-width: 0 !important;
  box-shadow: none !important;
}

.product-card-btn:focus,
.product-card-btn:active,
.product-card-btn-primary:focus,
.product-card-btn-primary:active,
.product-card-btn-secondary:focus,
.product-card-btn-secondary:active {
  outline: none !important;
  outline-width: 0 !important;
  box-shadow: none !important;
}

/* View Details Button */
.product-card-btn-secondary {
  background: white;
  color: rgb(57, 37, 138);
  border: 2px solid rgb(57, 37, 138);
}

.product-card-btn-secondary:hover {
  background: rgb(57, 37, 138);
  color: white;
}

/* Add to Cart Button */
.product-card-btn-primary {
  background: rgb(57, 37, 138);
  color: white;
}

.product-card-btn-primary:hover {
  background: rgb(47, 27, 128);
}

.product-card-btn-primary.loading {
  opacity: 0.7;
  cursor: wait;
}

.product-card-btn-primary.added {
  background: rgb(34, 197, 94);
}

/* Disabled Button */
.product-card-btn-disabled {
  background: rgb(226, 232, 240);
  color: rgb(148, 163, 184);
  cursor: not-allowed;
}

/* Mobile-specific product card adjustments */
@media (max-width: 768px) {
  .product-card-image-wrapper {
    padding: 0.75rem;
  }
  
  .product-card-content {
    padding: 0 0.75rem;
  }
  
  .product-card-title {
    font-size: 1rem;
    margin-bottom: 0.25rem;
  }
  
  .product-card-actions {
    padding: 0 0.75rem 0.75rem;
    gap: 0.375rem;
  }
  
  .product-card-btn,
  .product-card-button {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
  }
}

/* Tailwind-style utility classes for products page */
.min-h-screen {
  min-height: 100vh;
}

.bg-white {
  background-color: #ffffff;
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.from-primary-50 {
  --tw-gradient-from: rgb(245, 242, 250);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-indigo-100 {
  --tw-gradient-to: rgb(224, 231, 255);
}

.py-20 {
  padding-top: 3rem; /* Mobile: 48px */
  padding-bottom: 3rem;
}

@media (min-width: 768px) {
  .py-20 {
    padding-top: 5rem; /* md: 80px */
    padding-bottom: 5rem;
  }
}

.py-12 {
  padding-top: 2rem; /* Mobile: 32px */
  padding-bottom: 2rem;
}

@media (min-width: 768px) {
  .py-12 {
    padding-top: 3rem; /* md: 48px */
    padding-bottom: 3rem;
  }
}

.py-8 {
  padding-top: 1.5rem; /* Mobile: 24px */
  padding-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .py-8 {
    padding-top: 2rem; /* md: 32px */
    padding-bottom: 2rem;
  }
}

.py-16 {
  padding-top: 2.5rem; /* Mobile: 40px */
  padding-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .py-16 {
    padding-top: 4rem; /* md: 64px */
    padding-bottom: 4rem;
  }
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.max-w-7xl {
  max-width: 80rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-2xl {
  max-width: 42rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.text-center {
  text-align: center;
}

.text-5xl {
  font-size: 2rem; /* Mobile: 32px */
  line-height: 1.1;
}

@media (min-width: 640px) {
  .text-5xl {
    font-size: 2.5rem; /* sm: 40px */
    line-height: 1.15;
  }
}

@media (min-width: 768px) {
  .text-5xl {
    font-size: 3rem; /* md: 48px - original size */
    line-height: 1.2;
  }
}

.text-3xl {
  font-size: 1.5rem; /* Mobile: 24px */
  line-height: 1.3;
}

@media (min-width: 640px) {
  .text-3xl {
    font-size: 1.75rem; /* sm: 28px */
    line-height: 1.3;
  }
}

@media (min-width: 768px) {
  .text-3xl {
    font-size: 1.875rem; /* md: 30px - original size */
    line-height: 2.25rem;
  }
}

.text-xl {
  font-size: 1.125rem; /* Mobile: 18px */
  line-height: 1.5;
}

@media (min-width: 768px) {
  .text-xl {
    font-size: 1.25rem; /* md: 20px - original size */
    line-height: 1.75rem;
  }
}

.text-lg {
  font-size: 1rem; /* Mobile: 16px */
  line-height: 1.5;
}

@media (min-width: 768px) {
  .text-lg {
    font-size: 1.125rem; /* md: 18px - original size */
    line-height: 1.75rem;
  }
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.font-medium {
  font-weight: 500;
}

.font-heading {
  font-family: 'CircularStd', system-ui, sans-serif;
}

.text-gray-900 {
  color: rgb(17, 24, 39);
}

.text-gray-700 {
  color: rgb(55, 65, 81);
}

.text-gray-600 {
  color: rgb(75, 85, 99);
}

.text-slate-900 {
  color: rgb(15, 23, 42);
}

.text-slate-600 {
  color: rgb(71, 85, 105);
}

.text-slate-500 {
  color: rgb(100, 116, 139);
}

.text-primary-600 {
  color: rgb(51, 31, 122);
}

.text-primary-700 {
  color: rgb(44, 26, 106);
}

.text-white {
  color: #ffffff;
}

.text-red-700 {
  color: rgb(185, 28, 28);
}

.bg-gray-50 {
  background-color: rgb(249, 250, 251);
}

.bg-gray-100 {
  background-color: rgb(243, 244, 246);
}

.bg-primary-50 {
  background-color: rgb(245, 242, 250);
}

.bg-primary-100 {
  background-color: rgb(225, 219, 244);
}

.bg-primary-600 {
  background-color: rgb(51, 31, 122);
}

.bg-primary-700 {
  background-color: rgb(44, 26, 106);
}

.bg-slate-200 {
  background-color: rgb(226, 232, 240);
}

.bg-red-100 {
  background-color: rgb(254, 226, 226);
}

.bg-gradient-to-br.from-slate-50 {
  --tw-gradient-from: rgb(248, 250, 252);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-slate-100 {
  --tw-gradient-to: rgb(241, 245, 249);
}

.border-b {
  border-bottom-width: 1px;
}

.border-gray-200 {
  border-color: rgb(229, 231, 235);
}

.border-gray-300 {
  border-color: rgb(209, 213, 219);
}

/* Input and Select Styles */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="password"],
select,
textarea {
  width: 100%;
  padding: 0.5rem 1rem;
  border: 1px solid rgb(209, 213, 219);
  border-radius: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  transition: all 0.15s ease-in-out;
  background-color: #fff;
  color: #111827;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgb(99, 102, 241);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Select dropdown styling */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

/* Checkbox styling */
input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  border: 1px solid rgb(209, 213, 219);
  transition: all 0.15s ease-in-out;
  cursor: pointer;
}

input[type="checkbox"]:checked {
  background-color: rgb(99, 102, 241);
  border-color: rgb(99, 102, 241);
}

input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Focus ring utilities */
.focus\:ring-2:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.focus\:ring-primary-500:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.focus\:border-primary-500:focus {
  border-color: rgb(99, 102, 241);
}

.mb-6 {
  margin-bottom: 1rem; /* Mobile: 16px */
}

@media (min-width: 768px) {
  .mb-6 {
    margin-bottom: 1.5rem; /* md: 24px */
  }
}

.mb-4 {
  margin-bottom: 0.75rem; /* Mobile: 12px */
}

@media (min-width: 768px) {
  .mb-4 {
    margin-bottom: 1rem; /* md: 16px */
  }
}

.mb-3 {
  margin-bottom: 0.5rem; /* Mobile: 8px */
}

@media (min-width: 768px) {
  .mb-3 {
    margin-bottom: 0.75rem; /* md: 12px */
  }
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-12 {
  margin-bottom: 2rem; /* Mobile: 32px */
}

@media (min-width: 768px) {
  .mb-12 {
    margin-bottom: 3rem; /* md: 48px */
  }
}

.mt-12 {
  margin-top: 2rem; /* Mobile: 32px */
}

@media (min-width: 768px) {
  .mt-12 {
    margin-top: 3rem; /* md: 48px */
  }
}

.ml-2 {
  margin-left: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

@media (min-width: 640px) {
  .sm\:gap-4 {
    gap: 1rem;
  }
  
  .sm\:gap-6 {
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .lg\:gap-4 {
    gap: 1rem;
  }
  
  .lg\:gap-6 {
    gap: 1.5rem;
  }
}

.space-y-2 > * + * {
  margin-top: 0.5rem;
}

.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Product Card Responsive Adjustments */
@media (max-width: 639px) {
  /* Adjust product card spacing for mobile */
  .product-card {
    padding: 0.75rem;
  }
  
  .product-card h3,
  .product-card .product-name {
    font-size: 0.875rem;
    line-height: 1.2;
  }
  
  .product-card .product-price {
    font-size: 1rem;
  }
  
  .product-card .product-image {
    margin-bottom: 0.5rem;
  }
}

/* Desktop: Adjust for 5-column layout */
@media (min-width: 1024px) {
  /* Adjust card content for narrower width in 5-column layout */
  .product-card-content {
    padding: 0.875rem 1rem;
  }
  
  .product-card-title {
    font-size: 1rem;
  }
  
  .product-card-description {
    font-size: 0.75rem;
    line-height: 1.4;
  }
  
  .product-card-btn {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  
  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  
  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  
  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  
  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1280px) {
  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.w-full {
  width: 100%;
}

.w-16 {
  width: 4rem;
}

.h-16 {
  height: 4rem;
}

.h-auto {
  height: auto;
}

.block {
  display: block;
}

.inline-flex {
  display: inline-flex;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.top-3 {
  top: 0.75rem;
}

.right-3 {
  right: 0.75rem;
}

.left-3 {
  left: 0.75rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded {
  border-radius: 0.25rem;
}

.border {
  border-width: 1px;
}

.p-4 {
  padding: 1rem;
}

.p-6 {
  padding: 1.5rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.transition-colors {
  transition-property: color, background-color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.hover\:bg-primary-100:hover {
  background-color: rgb(225, 219, 244);
}

.hover\:bg-primary-700:hover {
  background-color: rgb(44, 26, 106);
}

.hover\:text-primary-600:hover {
  color: rgb(51, 31, 122);
}

.hover\:text-primary-700:hover {
  color: rgb(44, 26, 106);
}

.hover\:scale-105:hover {
  transform: scale(1.05);
}

.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}

.group:hover .group-hover\:text-primary-600 {
  color: rgb(51, 31, 122);
}

.focus\:ring-2:focus {
  box-shadow: 0 0 0 2px var(--tw-ring-color);
}

.focus\:ring-primary-500:focus {
  --tw-ring-color: rgb(57, 37, 138);
}

.focus\:ring-offset-2:focus {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tw-ring-color);
}

.focus\:border-primary-500:focus {
  border-color: rgb(57, 37, 138);
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.object-contain {
  object-fit: contain;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

/* Product Card Specific Styles */
.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transform: translateY(-2px);
}

.group {
  position: relative;
}

.purity-badge {
  background-color: rgb(245, 242, 250);
  color: rgb(51, 31, 122);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.quality-badge {
  background-color: rgb(243, 244, 246);
  color: rgb(75, 85, 99);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Mobile menu button */
.mobile-menu-button {
  display: none; /* Hidden by default */
  padding: 0.5rem;
  border-radius: 0.5rem;
  color: rgb(75, 85, 99); /* gray-600 exact */
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.mobile-menu-button:hover {
  color: rgb(17, 24, 39); /* gray-900 exact */
}

/* Show hamburger menu only on mobile */
@media (max-width: 767px) {
  .mobile-menu-button {
    display: block !important;
  }
}

/* Ensure it's hidden on tablets and desktop */
@media (min-width: 768px) {
  .mobile-menu-button {
    display: none !important;
  }
}

/* Mobile Menu Styles */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
}

.mobile-menu.active {
  display: block;
}

.mobile-menu-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.mobile-menu-content {
  position: absolute;
  top: 0;
  right: 0;
  width: 85%;
  max-width: 320px;
  height: 100%;
  background: white;
  z-index: 2;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.mobile-menu.active .mobile-menu-content {
  transform: translateX(0);
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid rgb(229, 231, 235);
}

.mobile-menu-logo img {
  height: 32px;
  width: auto;
}

.mobile-menu-close {
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: #374151;
}

.mobile-nav {
  padding: 1rem;
}

.mobile-nav-section {
  margin-bottom: 0.5rem;
}

.mobile-nav-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #f9fafb;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
  cursor: pointer;
  transition: background 0.2s;
}

.mobile-nav-toggle:hover {
  background: #f3f4f6;
}

.toggle-icon {
  transition: transform 0.2s;
}

.toggle-icon.rotated {
  transform: rotate(180deg);
}

.mobile-submenu {
  display: none;
  padding-left: 1rem;
  margin-top: 0.5rem;
}

.mobile-submenu.active {
  display: block;
}

.mobile-submenu a,
.mobile-nav-link {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  color: #4b5563;
  text-decoration: none;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  transition: all 0.2s;
}

.mobile-submenu a:hover,
.mobile-nav-link:hover {
  background: #f9fafb;
  color: var(--primary-purple);
}

.mobile-nav-divider {
  height: 1px;
  background: rgb(229, 231, 235);
  margin: 1rem 0;
}

.mobile-cart-count {
  margin-left: 0.25rem;
  color: var(--primary-purple);
  font-weight: 600;
}

.mobile-search {
  padding: 1rem;
  border-top: 1px solid rgb(229, 231, 235);
  display: flex;
  gap: 0.5rem;
}

.mobile-search-input {
  flex: 1;
  padding: 0.625rem 0.875rem;
  border: 1px solid rgb(209, 213, 219);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  outline: none;
}

.mobile-search-input:focus {
  border-color: var(--primary-purple);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.mobile-search-btn {
  padding: 0.625rem;
  background: var(--primary-purple);
  color: white;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.mobile-search-btn:hover {
  background: var(--primary-purple-hover);
}

/* Promotional Banner */
.promo-banner {
  background: rgb(57, 37, 138); /* exact primary color */
  color: white;
  padding: 0.5rem 0;
}

.promo-banner-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: center;
}

.promo-banner p {
  font-size: 0.875rem;
  margin: 0;
}

@media (min-width: 640px) {
  .hero-container {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .hero-container {
    padding: 0 2rem;
  }
}

/* Hero Section */
.hero-section {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(196, 181, 253, 0.2) 100%),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><circle cx="200" cy="200" r="150" fill="rgba(139,92,246,0.05)"/><circle cx="800" cy="300" r="100" fill="rgba(167,139,250,0.08)"/><circle cx="600" cy="700" r="200" fill="rgba(196,181,253,0.06)"/></svg>');
  padding: 80px 0 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.hero-content {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 60px 40px;
  box-shadow: 0 20px 40px rgba(107, 70, 193, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  max-width: 900px;
  margin: 0 auto;
}

.hero-title {
  color: rgb(17, 24, 39);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

@media (min-width: 640px) {
  .hero-title {
    font-size: 2.25rem; /* sm: 36px */
    line-height: 1.15;
  }
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 3rem; /* md: 40px */
    line-height: 1.1;
  }
}

@media (min-width: 1024px) {
  .hero-title {
    font-size: 3rem; /* lg: 64px - full desktop size */
    line-height: 1.05;
  }
}

.hero-subtitle {
  font-size: 0.95rem; /* Mobile: 15px */
  color: #6B7280;
  line-height: 1.4;
  margin-bottom: 1.25rem;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .hero-subtitle {
    font-size: 1rem; /* sm: 16px */
    max-width: 42rem;
    padding: 0;
  }
}

@media (min-width: 768px) {
  .hero-subtitle {
    font-size: 1.125rem; /* md: 18px */
    max-width: 48rem;
    margin-bottom: 2rem;
  }
}

/* Quality Indicators */
.quality-indicators {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Always 3 columns */
  gap: 0.75rem; /* Smaller gap */
  margin-bottom: 1.5rem;
}

.quality-indicator {
  text-align: center;
  padding: 0.5rem; /* Add padding for better spacing */
}

.quality-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.25rem; /* Smaller margin */
  width: 2rem; /* Smaller icon container */
  height: 2rem;
}

/* Make icons smaller on mobile */
.quality-icon img {
  width: 1.5rem;
  height: 1.5rem;
}

@media (min-width: 640px) {
  .quality-icon {
    width: 2.5rem;
    height: 2.5rem;
  }
  
  .quality-icon img {
    width: 2rem;
    height: 2rem;
  }
}

.quality-title {
  font-weight: 600;
  color: rgb(17, 24, 39); /* gray-900 exact */
  margin-bottom: 0.25rem; /* Smaller margin */
  font-size: 0.75rem; /* Smaller font on mobile */
  font-family: 'CircularStd', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

@media (min-width: 640px) {
  .quality-title {
    font-size: 0.875rem; /* Slightly larger on bigger screens */
  }
}

.quality-description {
  color: rgb(75, 85, 99); /* gray-600 exact */
  font-size: 0.625rem; /* Very small on mobile */
  line-height: 1.2;
}

@media (min-width: 640px) {
  .quality-description {
    font-size: 0.75rem; /* Slightly larger on bigger screens */
  }
}

/* CTA Button */
.btn-primary {
  background-color: rgb(var(--color-primary-600));
  color: white;
  padding: 0.75rem 1.5rem; /* py-3 px-6 */
  font-size: 1rem; /* text-base */
  font-weight: 500; /* font-medium */
  border: none;
  border-radius: 10px; /* Exact from old repo */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 200ms ease; /* duration-200 */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
}

.btn-primary:hover {
  background-color: rgb(var(--color-primary-700));
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
  text-decoration: none;
}

.btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 2px white, 0 0 0 4px rgb(var(--color-primary-500)); /* ring-2 ring-primary-500 ring-offset-2 */
}

.btn-primary:disabled {
  background-color: rgb(156, 163, 175); /* gray-400 */
  cursor: not-allowed;
  opacity: 0.75;
}

/* Secondary Button */
.btn-secondary {
  background-color: white;
  color: rgb(var(--color-primary-600));
  padding: 0.75rem 1.5rem; /* py-3 px-6 */
  font-size: 1rem;
  font-weight: 500;
  border: 1px solid rgb(var(--color-primary-600));
  border-radius: 10px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 200ms ease;
}

.btn-secondary:hover {
  background-color: rgb(var(--color-primary-50));
  text-decoration: none;
}

.btn-secondary:focus {
  outline: none;
  box-shadow: 0 0 0 2px white, 0 0 0 4px rgb(var(--color-primary-500));
}

.btn-secondary:disabled {
  background-color: white;
  color: rgb(156, 163, 175);
  border-color: rgb(209, 213, 219);
  cursor: not-allowed;
  opacity: 0.75;
}

/* Outline Button */
.btn-outline {
  background-color: transparent;
  color: rgb(55, 65, 81); /* gray-700 */
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  border: 1px solid rgb(209, 213, 219); /* gray-300 */
  border-radius: 10px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 200ms ease;
}

.btn-outline:hover {
  background-color: rgb(249, 250, 251); /* gray-50 */
  border-color: rgb(156, 163, 175); /* gray-400 */
  text-decoration: none;
}

.btn-outline:focus {
  outline: none;
  box-shadow: 0 0 0 2px white, 0 0 0 4px rgb(var(--color-primary-500));
}

/* Product Catalog Section */
.product-catalog-section {
  padding: 5rem 0;
  background: rgb(var(--color-gray-50));
}

.catalog-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .catalog-container {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .catalog-container {
    padding: 0 2rem;
  }
}

.catalog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
}

@media (max-width: 768px) {
  .catalog-header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}

.catalog-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: rgb(var(--color-primary-700));
  font-family: 'CircularStd', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.view-all-link {
  color: rgb(var(--color-primary-600));
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.view-all-link:hover {
  color: rgb(var(--color-primary-700));
}

.catalog-description {
  font-size: 1.125rem;
  color: rgb(var(--color-gray-600));
  margin-bottom: 2rem;
  text-align: center;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

/* ========================================
   UNIFIED PRODUCT GRID SYSTEM
   ========================================
   
   Usage:
   - Default: <div class="product-grid"> 
     Creates responsive grid: 2 cols mobile, 3 cols tablet, 4 cols desktop
   
   - Custom columns: <div class="product-grid cols-4">
     Forces 4 columns at all sizes
   
   - Responsive columns: <div class="product-grid sm-cols-2 md-cols-3 lg-cols-5">
     2 cols at 640px+, 3 cols at 768px+, 5 cols at 1024px+
   
   - Extra large: <div class="product-grid xl-cols-6">
     6 columns on screens 1280px+
   
   ======================================== */

/* Base Product Grid - Mobile First Approach */
.product-grid,
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 2rem;
}

/* Small screens (640px+) */
@media (min-width: 640px) {
  .product-grid,
  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

/* Medium screens/Tablets (768px+) */
@media (min-width: 768px) {
  .product-grid,
  .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

/* Large screens/Desktop (1024px+) - 4 columns */
@media (min-width: 1024px) {
  .product-grid,
  .products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

/* Extra large screens (1280px+) - Optional 6 columns */
@media (min-width: 1280px) {
  .product-grid.xl-cols-6,
  .products-grid.xl-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Utility classes for custom column counts */
.product-grid.cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.product-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.product-grid.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Responsive column utilities */
@media (min-width: 640px) {
  .product-grid.sm-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .product-grid.sm-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid.sm-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-grid.sm-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .product-grid.md-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid.md-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-grid.md-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .product-grid.md-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .product-grid.lg-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-grid.lg-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .product-grid.lg-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .product-grid.lg-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .product-grid.xl-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .product-grid.xl-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .product-grid.xl-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .product-grid.xl-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* Gap utilities for product grid */
.product-grid.gap-none { gap: 0; }
.product-grid.gap-xs { gap: 0.5rem; }
.product-grid.gap-sm { gap: 0.75rem; }
.product-grid.gap-md { gap: 1rem; }
.product-grid.gap-lg { gap: 1.5rem; }
.product-grid.gap-xl { gap: 2rem; }

/* About Section */
.about-section {
  padding: 5rem 0;
  background: white;
}

.about-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .about-container {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .about-container {
    padding: 0 2rem;
  }
}

.about-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

@media (min-width: 768px) {
  .about-content {
    flex-direction: row;
    align-items: flex-start;
  }
}

.about-image, .about-text {
  width: 100%;
}

@media (min-width: 768px) {
  .about-image, .about-text {
    width: 50%;
  }
}

.about-image img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.about-text {
  text-align: center;
}

@media (min-width: 768px) {
  .about-text {
    text-align: left;
  }
}

.about-subtitle {
  font-size: 1.875rem;
  font-weight: 600;
  color: rgb(var(--color-primary-700));
  margin-bottom: 1rem;
}

.about-title {
  font-size: 2.25rem;
  font-weight: 700;
  color: rgb(var(--color-gray-900));
  margin-bottom: 1.5rem;
  font-family: 'CircularStd', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.about-description {
  font-size: 1.125rem;
  color: rgb(var(--color-gray-600));
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* Why Us Section */
.why-us-section {
  padding: 5rem 0;
  background: rgb(var(--color-gray-50));
}

.why-us-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .why-us-container {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .why-us-container {
    padding: 0 2rem;
  }
}

.why-us-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .why-us-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

.why-us-text {
  text-align: center;
}

@media (min-width: 1024px) {
  .why-us-text {
    text-align: left;
  }
}

.why-us-header {
  margin-bottom: 4rem;
}

.why-us-subtitle {
  font-size: 1.875rem;
  font-weight: 600;
  color: rgb(var(--color-primary-700));
  margin-bottom: 2rem;
}

.why-us-title {
  font-size: 2.25rem;
  font-weight: 700;
  color: rgb(var(--color-gray-900));
  margin-bottom: 1.5rem;
  font-family: 'CircularStd', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.why-us-description {
  font-size: 1.125rem;
  color: rgb(var(--color-gray-600));
  max-width: 48rem;
  margin: 0 auto;
}

.why-us-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .why-us-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .why-us-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

.why-us-feature {
  text-align: center;
}

.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.feature-icon img {
  width: 50px;
  height: auto;
  /* Remove purple filter - keep icons black/original color */
}

.feature-title {
  font-weight: 600;
  color: rgb(17, 24, 39); /* gray-900 exact */
  margin-bottom: 0.5rem;
  font-family: 'CircularStd', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.feature-description {
  color: rgb(75, 85, 99); /* gray-600 exact */
}

.why-us-image {
  display: flex;
  justify-content: center;
}

@media (min-width: 1024px) {
  .why-us-image {
    justify-content: end;
  }
}

.why-us-image img {
  width: 100%;
  max-width: 28rem;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

@media (min-width: 1024px) {
  .why-us-image img {
    max-width: 32rem;
  }
}

/* Footer */
.site-footer {
  background: rgb(var(--color-gray-900));
  color: white;
}

.footer-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 4rem 1rem;
}

@media (min-width: 640px) {
  .footer-content {
    padding: 4rem 1.5rem;
  }
}

@media (min-width: 1024px) {
  .footer-content {
    padding: 4rem 2rem;
  }
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.footer-section h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.footer-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-section li {
  margin-bottom: 0.5rem;
}

.footer-section a {
  color: rgb(209, 213, 219); /* gray-300 exact */
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-section a:hover {
  color: white;
}

.footer-logo img {
  height: 6rem;
  width: auto;
  margin-bottom: 1rem;
}

.footer-description {
  color: rgb(209, 213, 219); /* gray-300 exact */
  margin-bottom: 1.5rem;
}

/* Legal Notice */
.legal-notice {
  border-top: 1px solid rgb(31, 41, 55); /* gray-800 exact */
  margin-top: 3rem;
  padding-top: 2rem;
}

.legal-notice-content {
  background: rgb(31, 41, 55); /* gray-800 exact */
  border-radius: 0.5rem; /* rounded-lg */
  padding: 1.5rem; /* p-6 */
  margin-bottom: 1.5rem; /* mb-6 */
  width: fit-content; /* contained box, not full width */
  max-width: 100%; /* responsive constraint */
}

.legal-notice h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: white;
  margin-bottom: 0.75rem;
}

.legal-notice p {
  font-size: 0.875rem;
  color: rgb(209, 213, 219); /* gray-300 exact */
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.legal-notice p:last-child {
  margin-bottom: 0;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: rgb(156, 163, 175); /* gray-400 exact */
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
  }
}

/* Product Card Styles - Exact replica from original site */
.card {
  background: white;
  border-radius: 0.75rem; /* rounded-xl */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow-sm */
  border: 1px solid rgb(229, 231, 235); /* border-gray-200 */
  overflow: hidden;
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* hover:shadow-lg */
}

/* Quality badges - exact from original */
.quality-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem; /* px-3 py-1 */
  border-radius: 9999px; /* rounded-full */
  font-size: 0.75rem; /* text-xs */
  font-weight: 500; /* font-medium */
  background-color: rgb(220, 252, 231); /* bg-green-100 */
  color: rgb(21, 128, 61); /* text-green-700 */
}

.purity-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem; /* px-3 py-1 */
  border-radius: 9999px; /* rounded-full */
  font-size: 0.75rem; /* text-xs */
  font-weight: 500; /* font-medium */
  background-color: rgb(225, 219, 244); /* bg-primary-100 */
  color: rgb(44, 26, 106); /* text-primary-700 */
}

/* Tailwind utility classes needed for product cards */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.top-3 {
  top: 0.75rem;
}

.right-3 {
  right: 0.75rem;
}

.left-3 {
  left: 0.75rem;
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.from-slate-50 {
  --tw-gradient-from: rgb(248, 250, 252);
  --tw-gradient-to: rgba(248, 250, 252, 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-slate-100 {
  --tw-gradient-to: rgb(241, 245, 249);
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.p-4 {
  padding: 1rem;
}

.p-6 {
  padding: 1.5rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.text-slate-900 {
  color: rgb(15, 23, 42);
}

.text-slate-600 {
  color: rgb(71, 85, 105);
}

.text-slate-500 {
  color: rgb(100, 116, 139);
}

.text-primary-600 {
  color: rgb(57, 37, 138); /* using exact primary color */
}

.bg-primary-50 {
  background-color: rgb(245, 242, 250);
}

.bg-primary-100 {
  background-color: rgb(225, 219, 244);
}

.bg-primary-600 {
  background-color: rgb(57, 37, 138);
}

.bg-primary-700 {
  background-color: rgb(51, 31, 122);
}

.hover\:bg-primary-100:hover {
  background-color: rgb(225, 219, 244);
}

.hover\:bg-primary-700:hover {
  background-color: rgb(51, 31, 122);
}

.hover\:text-primary-600:hover {
  color: rgb(57, 37, 138);
}

.bg-slate-200 {
  background-color: rgb(226, 232, 240);
}

.w-full {
  width: 100%;
}

.h-auto {
  height: auto;
}

.object-contain {
  object-fit: contain;
}

.block {
  display: block;
}

.space-y-2 > * + * {
  margin-top: 0.5rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.transition-colors {
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-all {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.duration-300 {
  transition-duration: 300ms;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-primary-500:focus {
  --tw-ring-color: rgb(57, 37, 138);
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}

.group:hover .group-hover\:text-primary-600 {
  color: rgb(57, 37, 138);
}

.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.font-heading {
  font-family: 'CircularStd', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Utility Classes */
.text-center {
  text-align: center;
}

.btn-secondary {
  background: white;
  color: rgb(var(--color-primary-600));
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  border: 1px solid rgb(var(--color-primary-600));
  border-radius: 0.625rem;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: rgb(var(--color-primary-50));
}

/* ========================================
   SLIDING CART STYLES
   ======================================== */

.sliding-cart {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  pointer-events: none;
  visibility: hidden;
}

.sliding-cart.active {
  visibility: visible;
  pointer-events: auto;
}

.sliding-cart-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: background 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
}

.sliding-cart.active .sliding-cart-overlay {
  background: rgba(0, 0, 0, 0.5);
}

.sliding-cart-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 450px;
  height: 100%;
  background: #fff;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.sliding-cart.active .sliding-cart-container {
  transform: translateX(0);
}

.sliding-cart-header {
  padding: 20px 25px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
}

.sliding-cart-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.cart-item-count {
  font-weight: 400;
  color: #6b7280;
  font-size: 1rem;
}

.sliding-cart-close {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: #6b7280;
  transition: color 0.2s;
}

.sliding-cart-close:hover {
  color: #111827;
}

.sliding-cart-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.sliding-cart-items {
  flex: 1;
  padding: 20px 25px;
}

.sliding-cart-item {
  display: flex;
  gap: 15px;
  padding: 20px 0;
  border-bottom: 1px solid #f3f4f6;
  position: relative;
}

.sliding-cart-item:first-child {
  padding-top: 0;
}

.cart-item-image {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

.cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d1d5db;
}

.cart-item-details {
  flex: 1;
}

.cart-item-details h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.cart-item-meta {
  margin-bottom: 12px;
}

.cart-item-price {
  font-size: 1.05rem;
  color: var(--primary-purple);
  font-weight: 700;
}

/* Quantity selector - same styles for both product page and sliding cart */
.quantity-selector,
.cart-item-quantity {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0.375rem !important;
  overflow: hidden !important;
  background: white !important;
}

/* Quantity buttons */
.quantity-btn {
  width: 40px !important;
  height: 40px !important;
  background: #f3f4f6 !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  color: #6b7280 !important;
  position: relative !important;
  user-select: none !important;
}

.quantity-btn:hover {
  background-color: #e5e7eb !important;
}

.quantity-btn:active {
  background-color: #d1d5db !important;
}

/* Removed SVG styles - now using CSS pseudo-elements for icons */

/* Quantity input - hide spinners for all quantity selectors */
.quantity-selector input[type="number"]::-webkit-outer-spin-button,
.quantity-selector input[type="number"]::-webkit-inner-spin-button,
.cart-item-quantity input[type="number"]::-webkit-outer-spin-button,
.cart-item-quantity input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.quantity-selector input[type="number"],
.cart-item-quantity input[type="number"] {
  -moz-appearance: textfield !important;
}

/* Disabled state for quantity buttons */
.quantity-btn:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}



/* Unified quantity selector pseudo-elements for minus/plus icons */
.quantity-btn.quantity-minus:after,
.quantity-btn.minus:after {
  content: '';
  position: absolute;
  width: 12px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.quantity-btn.quantity-plus:after,
.quantity-btn.plus:after {
  content: '';
  position: absolute;
  width: 12px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.quantity-btn.quantity-plus:before,
.quantity-btn.plus:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 12px;
  background: currentColor;
  border-radius: 1px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

*/

.cart-item-remove {
  position: absolute;
  top: 20px;
  right: 0;
  height: 30px;
  background: none;
  border: none;
  padding: 0.2rem;
  cursor: pointer;
  color: #9ca3af;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item-remove svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  display: block;
}

.cart-item-remove:hover {
  color: #ef4444;
}

.cart-item-remove:focus {
  outline: none;
}

.cart-item-remove:hover svg {
  transform: scale(1.1);
}

.cart-item-remove:active svg {
  transform: scale(0.95);
}

.cart-item-remove:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sliding-cart-footer {
  padding: 20px 25px;
  border-top: 2px solid #f3f4f6;
  background: #fff;
}

.cart-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f3f4f6;
}

.cart-subtotal span:first-child {
  font-size: 1rem;
  color: #6b7280;
}

.cart-subtotal-amount {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
}

.btn-checkout {
  display: block;
  width: 100%;
  padding: 14px 20px;
  background: var(--primary-purple) !important;
  color: #fff !important;
  text-align: center;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  margin-bottom: 10px;
}

.btn-checkout:hover {
  background: var(--primary-purple-hover) !important;
  color: #fff !important;
}

.btn-view-cart {
  display: block;
  width: 100%;
  padding: 12px 20px;
  background: #111827;
  color: #fff;
  text-align: center;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  margin-bottom: 10px;
}

.btn-view-cart:hover {
  background: #1f2937;
  color: #fff;
}

.btn-continue-shopping {
  display: block;
  width: 100%;
  padding: 12px 20px;
  background: transparent;
  color: #6b7280;
  text-align: center;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.95rem;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.btn-continue-shopping:hover {
  background: #f9fafb;
  color: #111827;
}

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 25px;
  text-align: center;
  min-height: 400px;
}

.cart-empty p {
  font-size: 1.1rem;
  color: #6b7280;
  margin: 20px 0 30px;
}

.cart-empty .btn-continue-shopping {
  display: inline-block;
  width: auto;
  padding: 12px 30px;
  background: #6366f1;
  color: #fff;
  border: none;
}

.cart-empty .btn-continue-shopping:hover {
  background: #4f46e5;
  color: #fff;
}

/* Free shipping progress bar */
.free-shipping-progress {
  padding: 20px 25px;
  background: linear-gradient(135deg, #f3e8ff 0%, #ede9fe 100%);
  border-bottom: 1px solid #e9d5ff;
}

.free-shipping-text {
  font-size: 0.875rem;
  color: #6b21a8;
  margin-bottom: 12px;
  text-align: center;
  font-weight: 500;
}

.progress-bar {
  height: 8px;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-purple) 0%, var(--primary-purple-hover) 100%);
  border-radius: 10px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.progress-amount {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--primary-purple-hover);
  font-weight: 600;
}

.progress-amount span:first-child {
  color: #6b21a8;
}

.progress-amount span:last-child {
  color: #9333ea;
}

/* Checkout & Payment Forms - Consistent Styling */

/* General form field styles for entire checkout */
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="number"],
.woocommerce-checkout .form-row input[type="password"],
.woocommerce-checkout .form-row input[type="url"],
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.payment_box input[type="text"],
.payment_box input[type="email"],
.payment_box input[type="tel"],
.payment_box input[type="number"],
.payment_box select,
.woocommerce-input-wrapper input,
.woocommerce-input-wrapper select,
.woocommerce-input-wrapper textarea {
  width: 100%;
  padding: 0.625rem 0.875rem; /* Consistent with search bar: py-2.5 px-3.5 */
  border: 1px solid rgb(209, 213, 219); /* border-gray-300 */
  border-radius: 0.5rem; /* rounded-lg like search */
  font-size: 0.875rem; /* text-sm like search */
  background-color: white;
  color: #111827;
  transition: all 0.15s;
  outline: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.5;
}

/* Focus states - purple to match site theme */
.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus,
.payment_box input:focus,
.payment_box select:focus,
.woocommerce-input-wrapper input:focus,
.woocommerce-input-wrapper select:focus,
.woocommerce-input-wrapper textarea:focus {
  border-color: var(--primary-purple); /* Purple instead of blue */
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* Form row spacing */
.woocommerce-checkout .form-row {
  margin-bottom: 1.25rem; /* Consistent 20px spacing */
}

/* Labels */
.woocommerce-checkout .form-row label,
.payment_box label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.375rem; /* 6px */
}

/* Required asterisk */
.woocommerce-checkout .form-row .required {
  color: #ef4444;
  font-weight: 600;
  margin-left: 2px;
}

/* Payment Methods Styling */
.woocommerce-checkout-payment {
  background: #f9fafb;
  border-radius: 0.75rem; /* 12px */
  padding: 1.5rem; /* 24px */
  margin-top: 1.5rem;
}

.woocommerce-checkout-payment h3 {
  color: #111827;
  font-size: 1.125rem; /* Slightly smaller for consistency */
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.wc_payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wc_payment_methods li {
  background: white;
  border: 1px solid rgb(209, 213, 219); /* Lighter border like inputs */
  border-radius: 0.5rem;
  margin-bottom: 1.25rem !important; /* More spacing between payment methods */
  padding: 1rem 1.25rem;
  transition: all 0.15s;
  cursor: pointer !important; /* Entire box is clickable */
  position: relative;
}

.wc_payment_methods li:last-child {
  margin-bottom: 0 !important; /* No margin on last item */
}

.wc_payment_methods li:hover {
  border-color: var(--primary-purple); /* Purple border on hover */
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.15);
  background: #faf5ff; /* Light purple background */
}

.wc_payment_methods li.selected {
  border-color: var(--primary-purple) !important;
  background: #faf5ff !important;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2) !important;
}

.wc_payment_methods input[type="radio"]:checked ~ label {
  font-weight: 600;
}

.wc_payment_methods input[type="radio"] {
  margin-right: 0.75rem;
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--primary-purple);
}

.wc_payment_methods label {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  margin: 0;
}

.wc_payment_methods label img {
  max-height: 28px !important;
  width: auto !important;
  margin-left: auto;
  object-fit: contain;
}

/* Payment box content */
.payment_box {
  background: #fafafa;
  border-radius: 0.5rem;
  padding: 1.25rem;
  margin-top: 1rem;
  display: none;
}

.payment_method_stripe .payment_box,
.wc_payment_method input[type="radio"]:checked ~ .payment_box {
  display: block;
}

/* Two column layout for expiry and CVC */
.payment_box .form-row-first,
.payment_box .form-row-last {
  width: calc(50% - 0.375rem);
  display: inline-block;
  vertical-align: top;
}

.payment_box .form-row-first {
  margin-right: 0.75rem;
}

.payment_box .form-row-wide {
  width: 100%;
}

/* Credit card icons container */
.payment_method_description {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.payment_method_description img {
  max-height: 24px !important;
  width: auto !important;
}

/* Card number, expiry, CVC layout */
.payment_box .form-row-first,
.payment_box .form-row-last {
  width: calc(50% - 0.375rem);
  display: inline-block;
  vertical-align: top;
}

.payment_box .form-row-first {
  margin-right: 0.75rem;
}

.payment_box .form-row-wide {
  width: 100%;
}

/* Stripe card element styling */
#stripe-card-element,
.stripe-card-element,
.StripeElement {
  padding: 0.625rem 0.875rem; /* Match search bar padding */
  border: 1px solid rgb(209, 213, 219); /* Match search bar border */
  border-radius: 0.5rem; /* Match search bar radius */
  background: white;
  min-height: 42px; /* Adjusted to match search bar height */
  font-size: 0.875rem; /* Match search bar font size */
}

.StripeElement--focus {
  border-color: var(--primary-purple); /* Match search bar focus */
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* ========================================
   PAYMENT METHOD COMPLETE RESTYLING
   ======================================== */

/* Reset all payment method styles first */
#payment *,
.woocommerce-checkout-payment *,
.payment_box * {
  box-sizing: border-box !important;
}

/* PAYMENT METHOD INPUTS - FORCE OVERRIDE ALL STYLES */
#payment input[type="text"],
#payment input[type="email"],
#payment input[type="tel"],
#payment input[type="number"],
#payment input[type="password"],
#payment input[type="date"],
#payment input[type="month"],
#payment input[type="week"],
#payment input[type="time"],
#payment input[type="datetime-local"],
#payment input[type="url"],
#payment select,
#payment textarea,
.woocommerce-checkout-payment input[type="text"],
.woocommerce-checkout-payment input[type="email"],
.woocommerce-checkout-payment input[type="tel"],
.woocommerce-checkout-payment input[type="number"],
.woocommerce-checkout-payment input[type="password"],
.woocommerce-checkout-payment select,
.woocommerce-checkout-payment textarea,
div#payment input[type="text"],
div#payment input[type="email"],
div#payment input[type="tel"],
div#payment input[type="number"],
div#payment input[type="password"],
div#payment select,
.payment_box input[type="text"],
.payment_box input[type="email"],
.payment_box input[type="tel"],
.payment_box input[type="number"],
.payment_box select,
#payment .input-text,
.payment_box .input-text {
  width: 100% !important;
  padding: 0.625rem 0.875rem !important; /* 10px 14px - Match checkout inputs */
  border: 1px solid rgb(209, 213, 219) !important;
  border-radius: 0.5rem !important; /* 8px */
  font-size: 0.875rem !important; /* 14px - CRITICAL */
  font-family: 'CircularStd', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  background-color: white !important;
  color: #111827 !important;
  transition: all 0.15s !important;
  outline: none !important;
  line-height: 1.5 !important; /* Match checkout */
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  height: auto !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
  display: block !important;
}

#payment input[type="text"]:focus,
#payment input[type="email"]:focus,
#payment input[type="tel"]:focus,
#payment input[type="number"]:focus,
#payment input[type="password"]:focus,
#payment select:focus,
#payment textarea:focus,
.woocommerce-checkout-payment input:focus,
.woocommerce-checkout-payment select:focus,
.woocommerce-checkout-payment textarea:focus,
div#payment input:focus,
div#payment select:focus,
.payment_box input:focus,
.payment_box select:focus {
  border-color: var(--primary-purple) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
  outline: none !important;
}

/* Override any plugin-specific styles for payment inputs */
#payment .woocommerce-input-wrapper input,
#payment .woocommerce-input-wrapper select,
#payment .form-row input:not([type="radio"]):not([type="checkbox"]),
#payment .form-row select,
div#payment .woocommerce-input-wrapper input,
div#payment .form-row input:not([type="radio"]):not([type="checkbox"]) {
  padding: 0.625rem 0.875rem !important;
  border: 1px solid rgb(209, 213, 219) !important;
  border-radius: 0.5rem !important;
  font-size: 0.875rem !important;
  font-family: 'CircularStd', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  min-height: 42px !important;
  max-height: 42px !important;
}

/* ULTRA-SPECIFIC OVERRIDES for third-party payment gateways */
#payment .pricpay-card-number,
#payment .pricpay-card-expiry,
#payment .pricpay-card-cvc,
#payment input.input-text,
div#payment input.input-text,
#payment .wc-credit-card-form-card-number,
#payment .wc-credit-card-form-card-expiry,
#payment .wc-credit-card-form-card-cvc,
#payment #stripe-card-number,
#payment #stripe-card-expiry,
#payment #stripe-card-cvc,
.payment_method_pricpay input,
.payment_method_stripe input,
.payment_method_stripe_sepa input,
.payment_method_paypal input {
  width: 100% !important;
  padding: 0.625rem 0.875rem !important; /* 10px 14px */
  border: 1px solid rgb(209, 213, 219) !important;
  border-radius: 0.5rem !important;
  font-size: 0.875rem !important; /* 14px - MUST MATCH */
  font-family: 'CircularStd', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  line-height: 1.5 !important;
  min-height: 42px !important;
  max-height: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  background-color: white !important;
  color: #111827 !important;
}

/* Force payment method radio buttons and labels alignment */
.wc_payment_methods li label {
  font-size: 0.875rem !important; /* 14px */
  line-height: 1.5 !important;
  display: flex !important;
  align-items: center !important;
}

.wc_payment_methods input[type="radio"] {
  margin-right: 0.75rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Ensure consistent spacing in payment forms */
#payment .form-row-first,
#payment .form-row-last,
.payment_box .form-row-first,
.payment_box .form-row-last {
  margin-bottom: 1.25rem !important; /* 20px */
}

/* Force all text in payment section to 14px */
#payment,
#payment *,
div#payment,
div#payment *,
.payment_box,
.payment_box * {
  font-size: 0.875rem !important; /* 14px */
  line-height: 1.5 !important;
}

/* Exception for headings */
#payment h3,
div#payment h3,
.woocommerce-checkout-payment h3 {
  font-size: 1.125rem !important; /* 18px for headings */
  margin-bottom: 1.25rem !important;
}

/* Clean payment method card input layouts */
.payment_box .form-row {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 1rem !important;
  width: 100% !important;
  float: none !important;
  clear: both !important;
}

/* Two column layout for expiry and CVC */
.payment_box .form-row-first,
.payment_box .form-row-last {
  width: calc(50% - 0.5rem) !important;
  display: inline-block !important;
  float: left !important;
  clear: none !important;
}

.payment_box .form-row-first {
  margin-right: 1rem !important;
}

.payment_box .form-row-wide {
  width: 100% !important;
  float: none !important;
  clear: both !important;
}

/* Clean up payment method wrapper */
.payment_method_pricpay .payment_box,
.payment_method_stripe .payment_box,
.payment_method_forumpay .payment_box {
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  padding: 1.25rem !important;
  margin: 1rem 0 !important;
  border-radius: 0.5rem !important;
}

/* Remove styling from Pricpay card direct payment box */
.payment_method_pricpay_carddirect .payment_box {
  border: none !important;
  margin-top: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Ensure inputs are properly sized */
.payment_box input[type="text"],
.payment_box input[type="email"],
.payment_box input[type="tel"],
.payment_box input[type="number"],
.payment_box select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0.625rem 0.875rem !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Remove any absolute positioning */
.payment_box .form-row,
.payment_box input,
.payment_box label {
  position: relative !important;
}

/* Ensure labels are above inputs */
.payment_box label {
  display: block !important;
  margin-bottom: 0.375rem !important;
  width: 100% !important;
  float: none !important;
  text-align: left !important;
}

/* Clear floats after form rows */
.payment_box:after,
.payment_box .form-row:after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}

.StripeElement--invalid {
  border-color: #ef4444;
}

/* Payment section form labels - FORCE MATCH CHECKOUT */
#payment label,
#payment .form-row label,
div#payment label,
.payment_box label,
.woocommerce-checkout-payment label,
#payment fieldset label,
.payment_box fieldset label {
  display: block !important;
  font-size: 0.875rem !important; /* 14px */
  font-weight: 500 !important;
  color: #374151 !important;
  margin-bottom: 0.375rem !important; /* 6px */
  font-family: 'CircularStd', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  line-height: 1.5 !important;
}

/* Payment form row spacing - MATCH CHECKOUT EXACTLY */
#payment .form-row,
div#payment .form-row,
.payment_box .form-row,
#payment fieldset,
.payment_box fieldset {
  margin-bottom: 1.25rem !important; /* 20px - same as checkout */
  padding: 0 !important;
  border: none !important;
}

/* Placeholder text styling */
#payment input::placeholder,
#payment select::placeholder,
div#payment input::placeholder,
.payment_box input::placeholder {
  color: #9ca3af !important;
  font-size: 0.875rem !important;
}

/* Payment box container styling */
#payment .payment_box,
div#payment .payment_box,
.payment_box,
#payment fieldset,
.payment_box fieldset {
  background: #f9fafb !important;
  padding: 1rem !important;
  border-radius: 0.5rem !important;
  margin-top: 0.75rem !important;
  border: 1px solid rgb(229, 231, 235) !important;
}

/* Payment section wrapper */
#payment,
div#payment,
.woocommerce-checkout-payment {
  font-size: 0.875rem !important; /* Base font size 14px */
  line-height: 1.5 !important;
}

/* Override any conflicting font families */
#payment,
#payment *,
div#payment,
div#payment * {
  font-family: 'CircularStd', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Ensure select dropdowns have proper arrow styling */
#payment select,
div#payment select,
.payment_box select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 0.5rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1.5em 1.5em !important;
  padding-right: 2.5rem !important;
}

/* ========================================
   MY ACCOUNT PAGE STYLING
   ======================================== */

/* My Account Container */
.woocommerce-account .woocommerce,
.woocommerce-MyAccount-content {
  font-family: 'CircularStd', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: #111827;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* My Account Navigation */
.woocommerce-MyAccount-navigation {
  background: white;
  border: 1px solid rgb(229, 231, 235);
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-MyAccount-navigation ul li {
  margin-bottom: 0.5rem;
}

.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 0.75rem 1rem;
  background: #f9fafb;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
}

.woocommerce-MyAccount-navigation ul li a:hover {
  background: #f3f4f6;
  border-color: rgb(209, 213, 219);
  color: var(--primary-purple);
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
  background: var(--primary-purple);
  color: white;
  border-color: var(--primary-purple);
}

/* My Account Content Area */
.woocommerce-MyAccount-content {
  background: white;
  border: 1px solid rgb(229, 231, 235);
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* My Account Headings */
.woocommerce-account h2,
.woocommerce-account h3,
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  color: #111827;
  font-weight: 600;
  margin-bottom: 1.5rem;
  font-family: 'CircularStd', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.woocommerce-account h2,
.woocommerce-MyAccount-content h2 {
  font-size: 1.5rem;
}

.woocommerce-account h3,
.woocommerce-MyAccount-content h3 {
  font-size: 1.125rem;
}

/* My Account Form Fields - Only within account content area */
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content input[type="number"],
.woocommerce-MyAccount-content input[type="date"],
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea,
.woocommerce-account .woocommerce input[type="text"],
.woocommerce-account .woocommerce input[type="email"],
.woocommerce-account .woocommerce input[type="password"],
.woocommerce-account .woocommerce input[type="tel"],
.woocommerce-account .woocommerce select,
.woocommerce-account .woocommerce textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid rgb(209, 213, 219);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-family: 'CircularStd', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: white;
  color: #111827;
  line-height: 1.5;
  transition: all 0.15s;
  outline: none;
}

.woocommerce-MyAccount-content input:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus,
.woocommerce-account .woocommerce input:focus,
.woocommerce-account .woocommerce select:focus,
.woocommerce-account .woocommerce textarea:focus {
  border-color: var(--primary-purple);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* My Account Form Labels - Only within account content area */
.woocommerce-MyAccount-content label,
.woocommerce-account .woocommerce label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}

/* My Account Buttons - Only within account content area */
.woocommerce-MyAccount-content button,
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content input[type="submit"],
.woocommerce-account .woocommerce button,
.woocommerce-account .woocommerce .button,
.woocommerce-account .woocommerce input[type="submit"] {
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'CircularStd', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  text-decoration: none;
  display: inline-block;
}

.woocommerce-MyAccount-content button:hover,
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content input[type="submit"]:hover,
.woocommerce-account .woocommerce button:hover,
.woocommerce-account .woocommerce .button:hover,
.woocommerce-account .woocommerce input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* My Account Tables */
.woocommerce-account table,
.woocommerce-MyAccount-content table,
.woocommerce-orders-table,
.woocommerce-table--order-details,
.woocommerce-table--order-downloads {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 1.5rem !important;
  font-size: 0.875rem !important;
}

.woocommerce-account table th,
.woocommerce-MyAccount-content table th {
  background: #f9fafb !important;
  padding: 0.75rem !important;
  text-align: left !important;
  font-weight: 600 !important;
  color: #374151 !important;
  border-bottom: 2px solid rgb(229, 231, 235) !important;
}

.woocommerce-account table td,
.woocommerce-MyAccount-content table td {
  padding: 0.75rem !important;
  border-bottom: 1px solid rgb(229, 231, 235) !important;
  color: #4b5563 !important;
}

.woocommerce-account table tr:hover,
.woocommerce-MyAccount-content table tr:hover {
  background: #fafbfc !important;
}

/* Order Status Badges */
.woocommerce-orders-table__cell-order-status {
  font-weight: 500 !important;
}

.woocommerce-orders-table__cell-order-status .order-status {
  display: inline-block !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 9999px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
}

/* Different status colors */
.order-status-completed,
.order-status-processing {
  background: #d1fae5 !important;
  color: #065f46 !important;
}

.order-status-pending {
  background: #fed7aa !important;
  color: #92400e !important;
}

.order-status-cancelled,
.order-status-failed {
  background: #fee2e2 !important;
  color: #991b1b !important;
}

/* Addresses Section */
.woocommerce-Addresses {
  display: flex !important;
  gap: 2rem !important;
  flex-wrap: wrap !important;
}

.woocommerce-Address {
  flex: 1 !important;
  min-width: 280px !important;
  background: #f9fafb !important;
  padding: 1.5rem !important;
  border-radius: 0.5rem !important;
  border: 1px solid rgb(229, 231, 235) !important;
}

.woocommerce-Address-title h3 {
  margin-bottom: 1rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid rgb(229, 231, 235) !important;
}

/* Messages and Notices */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
  padding: 1rem !important;
  border-radius: 0.5rem !important;
  margin-bottom: 1.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

.woocommerce-account .woocommerce-message {
  background: #d1fae5 !important;
  color: #065f46 !important;
  border: 1px solid #a7f3d0 !important;
}

.woocommerce-account .woocommerce-info {
  background: #dbeafe !important;
  color: #1e40af !important;
  border: 1px solid #bfdbfe !important;
}

.woocommerce-account .woocommerce-error {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border: 1px solid #fecaca !important;
}

/* Form Row Spacing */
.woocommerce-account .form-row,
.woocommerce-MyAccount-content .form-row {
  margin-bottom: 1.25rem !important;
}

/* Downloads Page */
.woocommerce-MyAccount-downloads {
  margin-top: 1.5rem !important;
}

.woocommerce-MyAccount-downloads .download-product {
  font-weight: 600 !important;
  color: #111827 !important;
}

.woocommerce-MyAccount-downloads .download-file {
  display: inline-block !important;
  margin-top: 0.5rem !important;
  padding: 0.5rem 1rem !important;
  background: var(--primary-purple) !important;
  color: white !important;
  border-radius: 0.375rem !important;
  text-decoration: none !important;
  font-size: 0.813rem !important;
  transition: all 0.2s !important;
}

.woocommerce-MyAccount-downloads .download-file:hover {
  background: var(--primary-purple-hover) !important;
}

/* Pagination */
.woocommerce-pagination {
  margin-top: 2rem !important;
  text-align: center !important;
}

.woocommerce-pagination ul {
  display: inline-flex !important;
  gap: 0.5rem !important;
  list-style: none !important;
  padding: 0 !important;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  display: block !important;
  padding: 0.5rem 0.75rem !important;
  background: white !important;
  border: 1px solid rgb(229, 231, 235) !important;
  border-radius: 0.375rem !important;
  color: #4b5563 !important;
  text-decoration: none !important;
  font-size: 0.875rem !important;
  transition: all 0.2s !important;
}

.woocommerce-pagination ul li a:hover {
  background: #f9fafb !important;
  border-color: var(--primary-purple) !important;
  color: var(--primary-purple) !important;
}

.woocommerce-pagination ul li .current {
  background: var(--primary-purple) !important;
  color: white !important;
  border-color: var(--primary-purple) !important;
}

/* Logout Link */
.woocommerce-MyAccount-navigation-link--customer-logout a {
  color: #dc2626 !important;
}

.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  background: #fee2e2 !important;
  color: #991b1b !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  .woocommerce-MyAccount-navigation {
    margin-bottom: 1.5rem !important;
  }
  
  .woocommerce-Addresses {
    flex-direction: column !important;
  }
  
  .woocommerce-Address {
    width: 100% !important;
  }
}

/* ========================================
   PRODUCT RESEARCH SECTION
   ======================================== */

/* Research section on product page */
.product-research-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgb(229, 231, 235);
}

.product-research-section .research-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 1rem;
  font-family: 'CircularStd', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.product-research-section .research-content {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #4b5563;
}

/* Structured Research Table */
.research-data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.research-data-table thead {
  background: #f9fafb;
  border-bottom: 2px solid #e5e7eb;
}

.research-data-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: #111827;
  font-size: 0.875rem;
}

.research-data-table .research-summary-header {
  width: 30%;
}

.research-data-table .research-description-header {
  width: 70%;
}

.research-data-table tbody tr {
  border-bottom: 1px solid #e5e7eb;
}

.research-data-table tbody tr:last-child {
  border-bottom: none;
}

.research-data-table tbody tr:hover {
  background: #f9fafb;
}

.research-data-table td {
  padding: 12px 16px;
  vertical-align: top;
  font-size: 0.875rem;
}

.research-data-table .research-summary-cell {
  font-weight: 500;
  color: #374151;
  width: 30%;
}

.research-data-table .research-description-cell {
  color: #4b5563;
  line-height: 1.6;
  width: 70%;
}

/* Research table links */
.research-data-table a.research-link,
.research-content a.research-link {
  color: var(--primary-purple) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: color 0.2s ease;
}

.research-data-table a.research-link:hover,
.research-content a.research-link:hover {
  color: var(--primary-purple-hover) !important;
  text-decoration: underline !important;
}

/* Responsive styling for Research Table */
@media (max-width: 768px) {
  .research-data-table {
    font-size: 0.813rem;
  }
  
  .research-data-table th,
  .research-data-table td {
    padding: 8px 12px;
  }
  
  .research-data-table .research-summary-header,
  .research-data-table .research-summary-cell {
    width: 35%;
  }
  
  .research-data-table .research-description-header,
  .research-data-table .research-description-cell {
    width: 65%;
  }
}

.product-research-section .research-content h3,
.product-research-section .research-content h4 {
  color: #111827;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.product-research-section .research-content ul,
.product-research-section .research-content ol {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.product-research-section .research-content li {
  margin-bottom: 0.5rem;
}

.product-research-section .research-content p {
  margin-bottom: 1rem;
}

.product-research-section .research-content a {
  color: var(--primary-purple);
  text-decoration: underline;
}

.product-research-section .research-content a:hover {
  color: var(--primary-purple-hover);
}

/* ========================================
   DATA SHEET SECTION
   ======================================== */

.product-datasheet-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgb(229, 231, 235);
}

.product-datasheet-section .datasheet-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 1.5rem;
  font-family: 'CircularStd', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-style: italic;
}

.datasheet-content {
  margin-top: 1rem;
}

.datasheet-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid #111827;
  background: #fff;
  font-size: 0.95rem;
}

.datasheet-table tbody tr {
  border-bottom: 1px solid #e5e7eb;
}

.datasheet-table tbody tr:last-child {
  border-bottom: 2px solid #111827;
}

.datasheet-table td {
  padding: 14px 16px;
  vertical-align: top;
  line-height: 1.6;
}

.datasheet-table .datasheet-label {
  font-weight: 500;
  color: #111827;
  background: transparent;
  width: 35%;
  padding-left: 0;
}

.datasheet-table .datasheet-value {
  color: #374151;
  background: transparent;
  width: 65%;
}

/* Handle multi-line content in Primary Research Area */
.datasheet-table .datasheet-value br {
  display: block;
  margin: 4px 0;
}

/* Format subscript and superscript in molecular formulas */
.datasheet-table .datasheet-value sub,
.datasheet-table .datasheet-value sup {
  font-size: 0.75em;
  vertical-align: baseline;
  position: relative;
}

.datasheet-table .datasheet-value sub {
  bottom: -0.25em;
}

.datasheet-table .datasheet-value sup {
  top: -0.5em;
}

/* Responsive styling for Data Sheet */
@media (max-width: 768px) {
  .product-datasheet-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
  }
  
  .datasheet-table .datasheet-label {
    width: 40%;
    font-size: 0.9rem;
  }
  
  .datasheet-table .datasheet-value {
    width: 60%;
    font-size: 0.9rem;
  }
  
  .datasheet-table td {
    padding: 10px 12px;
  }
}

/* Research tab in product tabs */
.woocommerce-tabs .research-tab-content {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #4b5563;
}

.woocommerce-tabs .research-tab-content h3,
.woocommerce-tabs .research-tab-content h4 {
  color: #111827;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.woocommerce-tabs .research-tab-content ul,
.woocommerce-tabs .research-tab-content ol {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.woocommerce-tabs .research-tab-content p {
  margin-bottom: 1rem;
}

/* Research Section Tables */
.product-research-section table,
.research-content table,
.research-tab-content table,
.research-section table {
  width: 100% !important;
  border-collapse: collapse;
  margin: 1.5rem 0;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border-radius: 0.5rem;
  overflow: hidden;
}

/* DataTables specific table width */
.dataTables_wrapper .dataTables_scroll,
.dataTables_wrapper .dataTables_scrollHead,
.dataTables_wrapper .dataTables_scrollBody {
  width: 100% !important;
}

/* DataTables Custom Styling */
.dataTables_wrapper {
  padding: 1rem 0;
  width: 100% !important;
}

.dataTables_wrapper table.dataTable {
  width: 100% !important;
  margin: 0 !important;
}

.dataTables_wrapper .dataTables_filter {
  margin-bottom: 1rem;
}

.dataTables_wrapper .dataTables_filter input {
  padding: 0.375rem 0.75rem !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0.375rem !important;
  font-size: 0.875rem !important;
  margin-left: 0.5rem;
  outline: none !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--primary-purple) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
}

.dataTables_wrapper .dataTables_length select {
  padding: 0.375rem 2rem 0.375rem 0.75rem !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0.375rem !important;
  font-size: 0.875rem !important;
  margin: 0 0.5rem;
  outline: none !important;
}

.dataTables_wrapper .dataTables_info {
  color: #6b7280;
  font-size: 0.875rem;
  padding-top: 0.75rem;
}

.dataTables_wrapper .dataTables_paginate {
  margin-top: 1rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 0.375rem 0.75rem !important;
  margin: 0 0.25rem;
  border: 1px solid #d1d5db !important;
  border-radius: 0.375rem !important;
  background: white !important;
  color: #4b5563 !important;
  font-size: 0.875rem !important;
  cursor: pointer;
  transition: all 0.2s;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #f9fafb !important;
  border-color: var(--primary-purple) !important;
  color: var(--primary-purple) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--primary-purple) !important;
  border-color: var(--primary-purple) !important;
  color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Responsive collapse/expand buttons */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
  background-color: var(--primary-purple) !important;
  border: 2px solid white !important;
  border-radius: 0.25rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}

/* Text wrapping for specific columns */
.research-datatable td.text-wrap {
  white-space: normal !important;
  word-wrap: break-word;
}

.research-datatable td.text-nowrap {
  white-space: nowrap !important;
}

/* Force column widths for Research tables - 2 column layout */
.research-content table.dataTable th:nth-child(1),
.research-content table.dataTable td:nth-child(1),
.research-section table.dataTable th:nth-child(1),
.research-section table.dataTable td:nth-child(1),
.product-research-section table.dataTable th:nth-child(1),
.product-research-section table.dataTable td:nth-child(1) {
  width: 30% !important;
  max-width: 30% !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

/* First column should always wrap, never truncate */

.research-content table.dataTable th:nth-child(2),
.research-content table.dataTable td:nth-child(2),
.research-section table.dataTable th:nth-child(2),
.research-section table.dataTable td:nth-child(2),
.product-research-section table.dataTable th:nth-child(2),
.product-research-section table.dataTable td:nth-child(2) {
  width: 70% !important;
  max-width: 70% !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

/* For second column - only truncate if it's a single line */
.research-content table.dataTable td:nth-child(2).single-line,
.research-section table.dataTable td:nth-child(2).single-line,
.product-research-section table.dataTable td:nth-child(2).single-line {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Links in Research tables - purple, bold, no underline */
.research-content table a,
.research-section table a,
.product-research-section table a,
.research-content table.dataTable a,
.research-section table.dataTable a,
.product-research-section table.dataTable a,
.research-content table td a,
.research-section table td a,
.product-research-section table td a,
.dataTables_wrapper table a,
table.dataTable tbody td a,
.research-datatable a,
.research-content a,
.research-section a,
.research-content table a span,
.research-section table a span,
.product-research-section table a span,
.research-content table.dataTable a span,
.research-section table.dataTable a span,
.product-research-section table.dataTable a span,
.research-content table td a span,
.research-section table td a span,
.product-research-section table td a span,
.dataTables_wrapper table a span,
table.dataTable tbody td a span,
.research-datatable a span,
.research-content a span,
.research-section a span {
  color: var(--primary-purple) !important;
  text-decoration: none !important;
  font-weight: bold !important;
}

.research-content table a:hover,
.research-section table a:hover,
.product-research-section table a:hover,
.research-content table.dataTable a:hover,
.research-section table.dataTable a:hover,
.product-research-section table.dataTable a:hover,
.research-content table td a:hover,
.research-section table td a:hover,
.product-research-section table td a:hover,
.dataTables_wrapper table a:hover,
table.dataTable tbody td a:hover,
.research-datatable a:hover,
.research-content a:hover,
.research-section a:hover,
.research-content table a:hover span,
.research-section table a:hover span,
.product-research-section table a:hover span,
.research-content table.dataTable a:hover span,
.research-section table.dataTable a:hover span,
.product-research-section table.dataTable a:hover span,
.research-content table td a:hover span,
.research-section table td a:hover span,
.product-research-section table td a:hover span,
.dataTables_wrapper table a:hover span,
table.dataTable tbody td a:hover span,
.research-datatable a:hover span,
.research-content a:hover span,
.research-section a:hover span {
  color: var(--primary-purple-hover) !important;
  text-decoration: none !important;
  font-weight: bold !important;
}

/* More specific selectors for DataTables */
.dataTables_wrapper .research-content a,
.dataTables_wrapper .research-section a,
.dataTables_wrapper .product-research-section a,
body .research-content table a,
body .research-section table a,
body .product-research-section table a {
  color: var(--primary-purple) !important;
  text-decoration: none !important;
  font-weight: bold !important;
}

/* Ensure table layout is fixed for column widths to work */
.research-content table.dataTable,
.research-section table.dataTable,
.product-research-section table.dataTable {
  table-layout: fixed !important;
}

/* Add hover effect for truncated cells */
.research-content table.dataTable td[title],
.research-section table.dataTable td[title],
.product-research-section table.dataTable td[title] {
  cursor: help;
}

.research-content table.dataTable td[title]:hover,
.research-section table.dataTable td[title]:hover,
.product-research-section table.dataTable td[title]:hover {
  background-color: #f9fafb;
}

/* Hide DataTables processing indicator */
.dataTables_processing {
  display: none !important;
}

.product-research-section table thead,
.research-content table thead,
.research-tab-content table thead {
  background: #f9fafb;
  border-bottom: 2px solid #e5e7eb;
}

.product-research-section table th,
.research-content table th,
.research-tab-content table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: #111827;
  font-size: 0.875rem;
}

.product-research-section table td,
.research-content table td,
.research-tab-content table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  color: #4b5563;
  font-size: 0.875rem;
}

.product-research-section table tbody tr:hover,
.research-content table tbody tr:hover,
.research-tab-content table tbody tr:hover {
  background: #f9fafb;
}

.product-research-section table tbody tr:last-child td,
.research-content table tbody tr:last-child td,
.research-tab-content table tbody tr:last-child td {
  border-bottom: none;
}

/* Responsive table container */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5rem 0;
}

/* Mobile responsive tables */
@media (max-width: 768px) {
  .product-research-section table,
  .research-content table,
  .research-tab-content table {
    font-size: 0.813rem;
  }
  
  .product-research-section table th,
  .product-research-section table td,
  .research-content table th,
  .research-content table td,
  .research-tab-content table th,
  .research-tab-content table td {
    padding: 0.5rem;
    min-width: 100px;
  }
}

/* Stack tables on very small screens */
@media (max-width: 480px) {
  .product-research-section table,
  .product-research-section table thead,
  .product-research-section table tbody,
  .product-research-section table th,
  .product-research-section table td,
  .product-research-section table tr,
  .research-content table,
  .research-content table thead,
  .research-content table tbody,
  .research-content table th,
  .research-content table td,
  .research-content table tr {
    display: block;
    width: 100% !important;
  }
  
  .product-research-section table thead tr,
  .research-content table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .product-research-section table tr,
  .research-content table tr {
    margin-bottom: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
  }
  
  .product-research-section table td,
  .research-content table td {
    border: none;
    position: relative;
    padding-left: 40% !important;
    width: 100% !important;
    min-width: unset;
  }
  
  .product-research-section table td:before,
  .research-content table td:before {
    content: attr(data-label);
    position: absolute;
    left: 0.5rem;
    width: 35%;
    padding-right: 0.5rem;
    font-weight: 600;
    color: #111827;
  }
}

/* Payment icons in radio labels */
.payment_method_paypal label img,
.payment_method_stripe label img,
.payment_method_forumpay label img {
  max-height: 28px !important;
  margin-left: auto;
}

/* PayPal specific */
.payment_method_paypal label::after {
  content: '';
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMTAwIDMyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMTIuNSAwSDI5LjE2NjdDMzEuODMzMyAwIDMzLjMzMzMgMS41IDMzLjMzMzMgNC4xNjY2N1YyNy45MTY2N0MzMy4zMzMzIDEwLjU4MzMgMzEuODMzMyAxMi4wODMzIDI5LjE2NjcgMTIuMDgzM0gxMi41QzkuODMzMzMgMTIuMDgzMyA4LjMzMzMzIDEwLjU4MzMgOC4zMzMzMyA3LjkxNjY3VjQuMTY2NjdDOC4zMzMzMyAxLjUgOS44MzMzMyAwIDEyLjUgMFoiIGZpbGw9IiMwMDMwODciLz4KPC9zdmc+');
  background-size: contain;
  background-repeat: no-repeat;
  width: 80px;
  height: 24px;
  margin-left: auto;
}

/* Credit card brand images container */
.payment_box .payment-icons {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  align-items: center;
}

.payment_box .payment-icons img {
  height: 28px !important;
  width: auto !important;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.payment_box .payment-icons img:hover {
  opacity: 1;
}

/* Error messages */
.woocommerce-error {
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #991b1b;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.875rem;
}

/* Place order button */
#place_order {
  background: var(--primary-purple) !important;
  color: white !important;
  padding: 14px 32px !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  border: none !important;
  width: 100%;
  margin-top: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
}

#place_order:hover {
  background: var(--primary-purple-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

#place_order:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ============================================= */
/* Account & Login Styling (from valar-peptides) */
/* ============================================= */

/* WooCommerce Account Page Layout */
.woocommerce-account .woocommerce {
  display: flex;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

/* Account Navigation Sidebar */
.woocommerce-MyAccount-navigation {
  flex: 0 0 250px;
  background: #f9fafb;
  border-radius: 10px;
  padding: 1.5rem;
  height: fit-content;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.woocommerce-MyAccount-navigation li {
  margin-bottom: 0.5rem;
}

.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.75rem 1rem;
  color: #374151;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.2s ease;
  font-weight: 500;
}

.woocommerce-MyAccount-navigation li a:hover {
  background: #e5e7eb;
  color: var(--primary-purple);
}

.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--primary-purple);
  color: white;
}

/* Account Content Area */
.woocommerce-MyAccount-content {
  flex: 1;
  background: white;
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Login/Register Forms */
.woocommerce-form-login,
.woocommerce-form-register {
  max-width: 400px;
  margin: 0 auto;
  padding: 2rem;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.woocommerce-form-login h2,
.woocommerce-form-register h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Form Fields */
.woocommerce-form-row {
  margin-bottom: 1.25rem;
}

.woocommerce-form-row label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #374151;
  font-size: 0.875rem;
}

.woocommerce-form-row input[type="text"],
.woocommerce-form-row input[type="password"],
.woocommerce-form-row input[type="email"] {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 1rem;
  transition: all 0.2s ease;
  background: white;
}

.woocommerce-form-row input:focus {
  outline: none;
  border-color: var(--primary-purple);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* Remember Me Checkbox */
.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #6b7280;
}

.woocommerce-form__input-checkbox {
  width: 1rem;
  height: 1rem;
  border-radius: 3px;
  border: 1px solid #d1d5db;
  cursor: pointer;
}

/* Submit Buttons */
.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
.woocommerce-Button {
  background: var(--primary-purple);
  color: white;
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  margin-top: 1rem;
}

.woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover,
.woocommerce-Button:hover {
  background: var(--primary-purple-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* Lost Password Link */
.woocommerce-LostPassword {
  text-align: center;
  margin-top: 1rem;
}

.woocommerce-LostPassword a {
  color: var(--primary-purple);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

.woocommerce-LostPassword a:hover {
  color: var(--primary-purple-hover);
  text-decoration: underline;
}

/* Split Login/Register Layout */
.u-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
}

.u-column1,
.u-column2 {
  background: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Error Messages */
.woocommerce-error,
.woocommerce-notice {
  padding: 1rem 1.5rem;
  border-radius: 6px;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.woocommerce-error {
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.woocommerce-notice {
  background: #dbeafe;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}

.woocommerce-notice--success {
  background: #d1fae5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

/* Account Dashboard */
.woocommerce-MyAccount-content p {
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.woocommerce-MyAccount-content strong {
  color: #111827;
  font-weight: 600;
}

/* Order Pay Page - Hide order details */
.woocommerce-order-pay table.shop_table,
.woocommerce-order-pay ul.order_details,
.woocommerce-order-pay .woocommerce-order-overview,
.woocommerce-checkout-payment #order_review table.shop_table,
#order_review_heading,
.woocommerce-order-pay .woocommerce-table--order-details,
.woocommerce-order-pay .order_details {
  display: none !important;
}

/* Only show payment section on order-pay page */
.woocommerce-order-pay #payment {
  margin-top: 0 !important;
}

.woocommerce-order-pay form#order_review {
  margin-top: 2rem;
}

/* Order Received/Thank You Page - Hide duplicate sections */
.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details,
.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-customer-details__title,
.woocommerce-order-received .woocommerce-table--order-details,
.woocommerce-order-received .woocommerce-column--billing-address,
.woocommerce-order-received .woocommerce-column--shipping-address,
.woocommerce-order-received .woocommerce-order > .woocommerce-order-overview,
.woocommerce-order-received .woocommerce-order > .woocommerce-thankyou-order-details,
.woocommerce-order-received .woocommerce-order > .woocommerce-customer-details {
  display: none !important;
}

/* Orders Table */
.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
}

.woocommerce-orders-table thead {
  background: #f9fafb;
  border-bottom: 2px solid #e5e7eb;
}

.woocommerce-orders-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: #374151;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.woocommerce-orders-table td {
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
  color: #6b7280;
}

.woocommerce-orders-table .woocommerce-button {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  background: var(--primary-purple);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
}

.woocommerce-orders-table .woocommerce-button:hover {
  background: var(--primary-purple-hover);
}

/* Addresses */
.woocommerce-Addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 1.5rem;
}

.woocommerce-Address {
  background: #f9fafb;
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.woocommerce-Address-title h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 1rem;
}

.woocommerce-Address address {
  font-style: normal;
  color: #6b7280;
  line-height: 1.6;
}

/* Edit Account Form */
.woocommerce-EditAccountForm {
  max-width: 600px;
}

.woocommerce-EditAccountForm fieldset {
  border: none;
  padding: 0;
  margin: 2rem 0;
}

.woocommerce-EditAccountForm legend {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e5e7eb;
  width: 100%;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce {
    flex-direction: column;
    padding: 1rem;
  }
  
  .woocommerce-MyAccount-navigation {
    flex: 1;
    margin-bottom: 1.5rem;
  }
  
  .u-columns {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .woocommerce-Addresses {
    grid-template-columns: 1fr;
  }
}

/* Cart slider specific adjustments */
.sliding-cart .cart-item-quantity {
  margin-top: 8px;
}

/* Mobile responsiveness */
@media (max-width: 500px) {
  .sliding-cart-container {
    width: 100%;
    right: -100%;
  }
  
  .sliding-cart.active .sliding-cart-container {
    right: 0;
  }
}

/* ========================================
   SEARCH DROPDOWN STYLES
   ======================================== */

.search-container {
  position: relative;
  z-index: 100;
}

.search-input-wrapper {
  position: relative;
  width: 256px; /* w-64 from valar-peptides */
}

#peptide-search,
.search-input {
  width: 100% !important;
  padding-left: 40px !important; /* 40px padding for icon space */
  padding-right: 2.5rem !important; /* pr-10 for clear button space */
  padding-top: 0.625rem !important; /* Slightly increased vertical padding */
  padding-bottom: 0.625rem !important;
  border: 1px solid rgb(209, 213, 219) !important; /* border-gray-300 */
  border-radius: 0.5rem !important; /* rounded-lg */
  font-size: 0.875rem !important;
  background-color: white !important;
  color: #111827 !important;
  transition: all 0.15s !important;
  outline: none !important;
  line-height: normal !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

.search-input:focus {
  border-color: var(--primary-purple); /* focus:border-purple-500 - matches site theme */
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1); /* focus:ring-2 ring-purple-500 */
}

.search-icon-left {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  padding-left: 0.75rem; /* pl-3 */
  display: flex;
  align-items: center;
  pointer-events: none;
  color: rgb(156, 163, 175); /* text-gray-400 */
  z-index: 1;
}

.search-clear {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  padding-right: 0.75rem; /* pr-3 */
  background: none;
  border: none;
  color: rgb(156, 163, 175); /* text-gray-400 */
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}

.search-clear:hover {
  color: rgb(107, 114, 128); /* hover:text-gray-600 */
}

.search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.5rem; /* mt-2 */
  background-color: white;
  border: 1px solid rgb(229, 231, 235); /* border-gray-200 */
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
  max-height: 24rem; /* max-h-96 */
  overflow-y: auto;
  z-index: 50;
}

.search-loading {
  padding: 20px;
  text-align: center;
  color: #6b7280;
}

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #e5e7eb;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 10px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.search-results {
  padding: 0.5rem 0;
}

.search-result-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s;
}

.search-result-item:hover {
  background-color: rgb(249, 250, 251); /* hover:bg-gray-50 */
}

.search-result-image {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  background-color: rgb(243, 244, 246); /* bg-gray-100 */
  border-radius: 0.5rem;
  overflow: hidden;
  margin-right: 0.75rem;
}

.search-result-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-result-content {
  flex: 1;
  min-width: 0;
}

.search-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.search-result-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(17, 24, 39); /* text-gray-900 */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.search-result-price {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(17, 24, 39); /* text-gray-900 */
  margin-left: 0.5rem;
}

.search-result-meta {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  color: rgb(107, 114, 128); /* text-gray-500 */
  margin-top: 0.25rem;
}

.search-result-meta span:not(:first-child):before {
  content: "•";
  margin: 0 0.25rem;
}

.search-footer {
  border-top: 1px solid rgb(243, 244, 246); /* border-gray-100 */
  padding: 0.5rem 0;
}

.view-all-results {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(59, 130, 246); /* text-blue-600 */
  text-decoration: none;
  transition: all 0.15s;
}

.view-all-results:hover {
  color: rgb(29, 78, 216); /* hover:text-blue-700 */
  background-color: rgb(239, 246, 255); /* hover:bg-blue-50 */
}

.search-result-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d1d5db;
}

.search-result-info {
  flex: 1;
  min-width: 0;
}

.search-result-details {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #6b7280;
}

.search-result-sku {
  padding: 2px 6px;
  background: #f3f4f6;
  border-radius: 4px;
  font-size: 0.75rem;
}

.search-result-price {
  color: #6366f1;
  font-weight: 600;
}

.search-footer {
  padding: 12px 16px;
  border-top: 1px solid #e5e7eb;
  text-align: center;
}

.view-all-results {
  color: #6366f1;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}

.view-all-results:hover {
  color: #4f46e5;
}

.search-no-results {
  padding: 40px 20px;
  text-align: center;
  color: #6b7280;
}

.search-no-results svg {
  margin: 0 auto 16px;
  opacity: 0.3;
}