/*
Theme Name:        PrintForge3D
Theme URI:         https://printforge3d.com
Author:            PrintForge3D
Author URI:        https://printforge3d.com
Description:       A premium WooCommerce theme for 3D printing businesses. Sell 3D printed objects, accept custom design requests with file uploads, and offer 3D walkthrough services. Built with Elementor compatibility, Razorpay payment integration, and a futuristic dark design system.
Version:           1.0.0
Requires at least: 6.0
Tested up to:      6.5
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       printforge3d
Tags:              woocommerce, elementor, ecommerce, 3d-printing, dark, modern, one-column, two-columns, custom-menu, custom-logo, featured-images, full-width-template, threaded-comments, translation-ready
WC requires at least: 7.0
WC tested up to:      9.0
*/

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ========================================================================== */

:root {
  /* Brand Colors */
  --pf-primary:          #FF5722;
  --pf-primary-dark:     #E64A19;
  --pf-primary-light:    #FF7043;
  --pf-primary-glow:     rgba(255, 87, 34, 0.2);

  --pf-cyan:             #00BCD4;
  --pf-cyan-dark:        #0097A7;
  --pf-cyan-glow:        rgba(0, 188, 212, 0.15);

  /* Backgrounds */
  --pf-bg-base:          #0D0E1A;
  --pf-bg-surface:       #161828;
  --pf-bg-elevated:      #1C1E30;
  --pf-bg-card:          #1A1C2E;
  --pf-bg-input:         #12131F;

  /* Borders */
  --pf-border:           #2A2D45;
  --pf-border-light:     #353857;
  --pf-border-focus:     var(--pf-primary);

  /* Text */
  --pf-text-primary:     #FFFFFF;
  --pf-text-secondary:   #C8CBDF;
  --pf-text-muted:       #8A8FA8;
  --pf-text-disabled:    #4A4E66;

  /* Gradients */
  --pf-gradient-primary: linear-gradient(135deg, #FF5722 0%, #FF1744 100%);
  --pf-gradient-cyan:    linear-gradient(135deg, #00BCD4 0%, #0097A7 100%);
  --pf-gradient-hero:    linear-gradient(135deg, #0D0E1A 0%, #1C1E30 50%, #0D1525 100%);
  --pf-gradient-card:    linear-gradient(145deg, #1C1E30 0%, #161828 100%);
  --pf-gradient-overlay: linear-gradient(180deg, rgba(13,14,26,0) 0%, rgba(13,14,26,0.95) 100%);

  /* Status Colors */
  --pf-success:          #4CAF50;
  --pf-warning:          #FF9800;
  --pf-error:            #F44336;
  --pf-info:             #2196F3;

  /* Typography */
  --pf-font-heading:     'Syne', 'Inter', sans-serif;
  --pf-font-body:        'Inter', 'Segoe UI', sans-serif;
  --pf-font-mono:        'JetBrains Mono', 'Courier New', monospace;

  /* Font Sizes */
  --pf-text-xs:          0.75rem;    /* 12px */
  --pf-text-sm:          0.875rem;   /* 14px */
  --pf-text-base:        1rem;       /* 16px */
  --pf-text-lg:          1.125rem;   /* 18px */
  --pf-text-xl:          1.25rem;    /* 20px */
  --pf-text-2xl:         1.5rem;     /* 24px */
  --pf-text-3xl:         1.875rem;   /* 30px */
  --pf-text-4xl:         2.25rem;    /* 36px */
  --pf-text-5xl:         3rem;       /* 48px */
  --pf-text-6xl:         3.75rem;    /* 60px */
  --pf-text-7xl:         4.5rem;     /* 72px */

  /* Font Weights */
  --pf-font-normal:      400;
  --pf-font-medium:      500;
  --pf-font-semibold:    600;
  --pf-font-bold:        700;
  --pf-font-extrabold:   800;

  /* Line Heights */
  --pf-leading-tight:    1.2;
  --pf-leading-snug:     1.375;
  --pf-leading-normal:   1.5;
  --pf-leading-relaxed:  1.625;
  --pf-leading-loose:    2;

  /* Spacing */
  --pf-space-1:          0.25rem;   /* 4px */
  --pf-space-2:          0.5rem;    /* 8px */
  --pf-space-3:          0.75rem;   /* 12px */
  --pf-space-4:          1rem;      /* 16px */
  --pf-space-5:          1.25rem;   /* 20px */
  --pf-space-6:          1.5rem;    /* 24px */
  --pf-space-8:          2rem;      /* 32px */
  --pf-space-10:         2.5rem;    /* 40px */
  --pf-space-12:         3rem;      /* 48px */
  --pf-space-16:         4rem;      /* 64px */
  --pf-space-20:         5rem;      /* 80px */
  --pf-space-24:         6rem;      /* 96px */
  --pf-space-32:         8rem;      /* 128px */

  /* Border Radius */
  --pf-radius-sm:        4px;
  --pf-radius-md:        8px;
  --pf-radius-lg:        12px;
  --pf-radius-xl:        16px;
  --pf-radius-2xl:       24px;
  --pf-radius-full:      9999px;

  /* Shadows */
  --pf-shadow-sm:        0 1px 3px rgba(0,0,0,0.4);
  --pf-shadow-md:        0 4px 16px rgba(0,0,0,0.5);
  --pf-shadow-lg:        0 8px 32px rgba(0,0,0,0.6);
  --pf-shadow-xl:        0 16px 48px rgba(0,0,0,0.7);
  --pf-shadow-primary:   0 8px 32px rgba(255, 87, 34, 0.3);
  --pf-shadow-cyan:      0 8px 32px rgba(0, 188, 212, 0.25);

  /* Transitions */
  --pf-transition-fast:  150ms ease;
  --pf-transition-base:  250ms ease;
  --pf-transition-slow:  400ms ease;
  --pf-transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --pf-container-max:    1280px;
  --pf-container-pad:    2rem;
  --pf-header-height:    80px;

  /* Z-index layers */
  --pf-z-dropdown:       100;
  --pf-z-sticky:         200;
  --pf-z-overlay:        300;
  --pf-z-modal:          400;
  --pf-z-toast:          500;
}

/* ==========================================================================
   2. BASE RESET & GLOBALS
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--pf-font-body);
  font-size: var(--pf-text-base);
  font-weight: var(--pf-font-normal);
  line-height: var(--pf-leading-normal);
  color: var(--pf-text-secondary);
  background-color: var(--pf-bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pf-font-heading);
  font-weight: var(--pf-font-bold);
  line-height: var(--pf-leading-tight);
  color: var(--pf-text-primary);
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.25rem, 5vw, var(--pf-text-7xl)); }
h2 { font-size: clamp(1.75rem, 3.5vw, var(--pf-text-5xl)); }
h3 { font-size: clamp(1.25rem, 2.5vw, var(--pf-text-3xl)); }
h4 { font-size: clamp(1.125rem, 2vw, var(--pf-text-2xl)); }
h5 { font-size: var(--pf-text-xl); }
h6 { font-size: var(--pf-text-lg); }

p {
  margin-bottom: var(--pf-space-4);
  line-height: var(--pf-leading-relaxed);
}

p:last-child { margin-bottom: 0; }

a {
  color: var(--pf-primary);
  text-decoration: none;
  transition: color var(--pf-transition-fast);
}

a:hover { color: var(--pf-primary-light); }

strong, b { font-weight: var(--pf-font-bold); color: var(--pf-text-primary); }
em, i { font-style: italic; }

small { font-size: var(--pf-text-sm); }

blockquote {
  border-left: 3px solid var(--pf-primary);
  padding: var(--pf-space-4) var(--pf-space-6);
  margin: var(--pf-space-6) 0;
  background: var(--pf-bg-surface);
  border-radius: 0 var(--pf-radius-md) var(--pf-radius-md) 0;
  font-style: italic;
  color: var(--pf-text-secondary);
}

code {
  font-family: var(--pf-font-mono);
  font-size: 0.9em;
  background: var(--pf-bg-elevated);
  color: var(--pf-cyan);
  padding: 0.1em 0.4em;
  border-radius: var(--pf-radius-sm);
}

pre {
  font-family: var(--pf-font-mono);
  font-size: var(--pf-text-sm);
  background: var(--pf-bg-elevated);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-md);
  padding: var(--pf-space-4);
  overflow-x: auto;
  line-height: var(--pf-leading-relaxed);
}

hr {
  border: none;
  border-top: 1px solid var(--pf-border);
  margin: var(--pf-space-8) 0;
}

ul, ol {
  padding-left: var(--pf-space-6);
  margin-bottom: var(--pf-space-4);
}

li { margin-bottom: var(--pf-space-2); }

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

svg { display: block; }

/* ==========================================================================
   4. LAYOUT UTILITIES
   ========================================================================== */

.pf-container {
  width: 100%;
  max-width: var(--pf-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pf-container-pad);
  padding-right: var(--pf-container-pad);
}

.pf-section {
  padding-top: var(--pf-space-20);
  padding-bottom: var(--pf-space-20);
}

.pf-section--sm {
  padding-top: var(--pf-space-12);
  padding-bottom: var(--pf-space-12);
}

.pf-section--lg {
  padding-top: var(--pf-space-32);
  padding-bottom: var(--pf-space-32);
}

/* Grid helpers */
.pf-grid {
  display: grid;
  gap: var(--pf-space-6);
}

.pf-grid-2 { grid-template-columns: repeat(2, 1fr); }
.pf-grid-3 { grid-template-columns: repeat(3, 1fr); }
.pf-grid-4 { grid-template-columns: repeat(4, 1fr); }

.pf-flex { display: flex; }
.pf-flex-center { display: flex; align-items: center; justify-content: center; }
.pf-flex-between { display: flex; align-items: center; justify-content: space-between; }

/* Text alignment */
.pf-text-center { text-align: center; }
.pf-text-left   { text-align: left; }
.pf-text-right  { text-align: right; }

/* Visibility */
.pf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.pf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pf-space-2);
  padding: 0.75rem 1.75rem;
  font-family: var(--pf-font-heading);
  font-size: var(--pf-text-sm);
  font-weight: var(--pf-font-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--pf-radius-md);
  cursor: pointer;
  transition: all var(--pf-transition-base);
  white-space: nowrap;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.pf-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  opacity: 0;
  transition: opacity var(--pf-transition-fast);
}

.pf-btn:hover::after { opacity: 1; }

/* Primary */
.pf-btn-primary {
  background: var(--pf-gradient-primary);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: var(--pf-shadow-primary);
}

.pf-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(255, 87, 34, 0.45);
  color: #FFFFFF;
}

.pf-btn-primary:active { transform: translateY(0); }

/* Secondary / Outline */
.pf-btn-outline {
  background: transparent;
  color: var(--pf-text-primary);
  border-color: var(--pf-border-light);
}

.pf-btn-outline:hover {
  border-color: var(--pf-primary);
  color: var(--pf-primary);
  transform: translateY(-2px);
}

/* Cyan */
.pf-btn-cyan {
  background: var(--pf-gradient-cyan);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: var(--pf-shadow-cyan);
}

.pf-btn-cyan:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 188, 212, 0.4);
  color: #FFFFFF;
}

/* Ghost */
.pf-btn-ghost {
  background: transparent;
  color: var(--pf-primary);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}

.pf-btn-ghost:hover {
  color: var(--pf-primary-light);
  gap: var(--pf-space-3);
}

/* Sizes */
.pf-btn-sm {
  padding: 0.5rem 1.25rem;
  font-size: var(--pf-text-xs);
}

.pf-btn-lg {
  padding: 1rem 2.5rem;
  font-size: var(--pf-text-base);
}

.pf-btn-xl {
  padding: 1.125rem 3rem;
  font-size: var(--pf-text-lg);
  border-radius: var(--pf-radius-lg);
}

/* Icon button */
.pf-btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--pf-radius-md);
}

/* ==========================================================================
   6. FORM ELEMENTS
   ========================================================================== */

.pf-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-2);
  margin-bottom: var(--pf-space-5);
}

.pf-label {
  font-size: var(--pf-text-sm);
  font-weight: var(--pf-font-medium);
  color: var(--pf-text-secondary);
  letter-spacing: 0.02em;
}

.pf-label .required { color: var(--pf-primary); margin-left: 2px; }

.pf-input,
.pf-textarea,
.pf-select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--pf-font-body);
  font-size: var(--pf-text-base);
  color: var(--pf-text-primary);
  background: var(--pf-bg-input);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-md);
  transition: border-color var(--pf-transition-fast), box-shadow var(--pf-transition-fast);
  outline: none;
  -webkit-appearance: none;
}

.pf-input::placeholder,
.pf-textarea::placeholder {
  color: var(--pf-text-disabled);
}

.pf-input:focus,
.pf-textarea:focus,
.pf-select:focus {
  border-color: var(--pf-primary);
  box-shadow: 0 0 0 3px var(--pf-primary-glow);
}

.pf-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: var(--pf-leading-relaxed);
}

.pf-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8FA8' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* File upload */
.pf-file-upload {
  border: 2px dashed var(--pf-border);
  border-radius: var(--pf-radius-lg);
  padding: var(--pf-space-10);
  text-align: center;
  cursor: pointer;
  transition: all var(--pf-transition-base);
  background: var(--pf-bg-input);
  position: relative;
}

.pf-file-upload:hover,
.pf-file-upload.dragover {
  border-color: var(--pf-primary);
  background: var(--pf-primary-glow);
}

.pf-file-upload input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   7. CARDS
   ========================================================================== */

.pf-card {
  background: var(--pf-bg-card);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-xl);
  overflow: hidden;
  transition: transform var(--pf-transition-base), box-shadow var(--pf-transition-base), border-color var(--pf-transition-base);
}

.pf-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pf-shadow-xl);
  border-color: var(--pf-border-light);
}

.pf-card__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
}

.pf-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--pf-transition-slow);
}

.pf-card:hover .pf-card__image img {
  transform: scale(1.05);
}

.pf-card__body {
  padding: var(--pf-space-5);
}

/* ==========================================================================
   8. BADGES & TAGS
   ========================================================================== */

.pf-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: var(--pf-text-xs);
  font-weight: var(--pf-font-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--pf-radius-full);
}

.pf-badge-primary {
  background: var(--pf-primary-glow);
  color: var(--pf-primary);
  border: 1px solid rgba(255,87,34,0.3);
}

.pf-badge-cyan {
  background: var(--pf-cyan-glow);
  color: var(--pf-cyan);
  border: 1px solid rgba(0,188,212,0.3);
}

.pf-badge-success {
  background: rgba(76,175,80,0.15);
  color: var(--pf-success);
}

/* ==========================================================================
   9. SECTION HEADERS
   ========================================================================== */

.pf-section-header {
  margin-bottom: var(--pf-space-12);
}

.pf-section-header--center {
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--pf-space-12);
}

.pf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-space-2);
  font-family: var(--pf-font-heading);
  font-size: var(--pf-text-xs);
  font-weight: var(--pf-font-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pf-primary);
  margin-bottom: var(--pf-space-3);
}

.pf-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--pf-primary);
  border-radius: 2px;
}

.pf-section-title {
  font-family: var(--pf-font-heading);
  font-weight: var(--pf-font-extrabold);
  line-height: var(--pf-leading-tight);
  color: var(--pf-text-primary);
  margin-bottom: var(--pf-space-4);
}

.pf-section-desc {
  font-size: var(--pf-text-lg);
  color: var(--pf-text-muted);
  line-height: var(--pf-leading-relaxed);
}

/* Gradient text utility */
.pf-gradient-text {
  background: var(--pf-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ==========================================================================
   10. DECORATIVE ELEMENTS
   ========================================================================== */

/* Glowing orbs */
.pf-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.pf-orb-primary {
  background: radial-gradient(circle, rgba(255,87,34,0.25) 0%, transparent 70%);
}

.pf-orb-cyan {
  background: radial-gradient(circle, rgba(0,188,212,0.2) 0%, transparent 70%);
}

/* Grid overlay texture */
.pf-grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Noise texture overlay */
.pf-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.4;
}

/* ==========================================================================
   11. LOADING & ANIMATIONS
   ========================================================================== */

@keyframes pf-fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pf-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pf-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}

@keyframes pf-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes pf-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes pf-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

.pf-animate-fadeUp   { animation: pf-fadeUp 0.6s ease forwards; }
.pf-animate-fadeIn   { animation: pf-fadeIn 0.4s ease forwards; }
.pf-animate-float    { animation: pf-float 6s ease-in-out infinite; }

/* Skeleton loader */
.pf-skeleton {
  background: linear-gradient(
    90deg,
    var(--pf-bg-elevated) 25%,
    var(--pf-border) 50%,
    var(--pf-bg-elevated) 75%
  );
  background-size: 200% 100%;
  animation: pf-shimmer 1.5s infinite;
  border-radius: var(--pf-radius-md);
}

/* ==========================================================================
   12. SCROLLBAR
   ========================================================================== */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--pf-bg-base); }
::-webkit-scrollbar-thumb {
  background: var(--pf-border-light);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--pf-text-muted); }

/* ==========================================================================
   13. SELECTION
   ========================================================================== */

::selection {
  background: var(--pf-primary-glow);
  color: var(--pf-primary);
}

/* ==========================================================================
   14. FOCUS RING (Accessibility)
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--pf-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ==========================================================================
   15. WORDPRESS CORE CLASSES
   ========================================================================== */

.wp-caption { max-width: 100%; }
.wp-caption-text {
  font-size: var(--pf-text-sm);
  color: var(--pf-text-muted);
  margin-top: var(--pf-space-2);
  text-align: center;
}

.gallery { display: grid; gap: var(--pf-space-3); }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }

.alignleft  { float: left; margin-right: var(--pf-space-4); }
.alignright { float: right; margin-left: var(--pf-space-4); }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide  { max-width: 1400px; margin-left: auto; margin-right: auto; }
.alignfull  { width: 100vw; margin-left: calc(50% - 50vw); }

.sticky { /* WordPress sticky post */ }

/* ==========================================================================
   16. WOOCOMMERCE OVERWRITES (base)
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--pf-radius-md);
  padding: var(--pf-space-4) var(--pf-space-6);
  margin-bottom: var(--pf-space-6);
  font-size: var(--pf-text-sm);
}

.woocommerce-message {
  background: rgba(76,175,80,0.1);
  border-left: 3px solid var(--pf-success);
  color: var(--pf-success);
}

.woocommerce-info {
  background: rgba(33,150,243,0.1);
  border-left: 3px solid var(--pf-info);
  color: var(--pf-info);
}

.woocommerce-error {
  background: rgba(244,67,54,0.1);
  border-left: 3px solid var(--pf-error);
  color: var(--pf-error);
  list-style: none;
  padding-left: var(--pf-space-6);
}

/* Star ratings */
.star-rating {
  color: #FFB300;
  font-size: var(--pf-text-sm);
  letter-spacing: 1px;
}

/* Price */
.woocommerce-Price-amount {
  font-family: var(--pf-font-heading);
  font-weight: var(--pf-font-bold);
  color: var(--pf-text-primary);
}

del .woocommerce-Price-amount {
  color: var(--pf-text-muted);
  font-weight: var(--pf-font-normal);
}

ins {
  text-decoration: none;
  color: var(--pf-primary);
}

/* ==========================================================================
   17. UTILITY CLASSES
   ========================================================================== */

.pf-relative { position: relative; }
.pf-absolute { position: absolute; }
.pf-fixed    { position: fixed; }
.pf-sticky   { position: sticky; }

.pf-overflow-hidden { overflow: hidden; }
.pf-overflow-clip   { overflow: clip; }

.pf-w-full  { width: 100%; }
.pf-h-full  { height: 100%; }

.pf-rounded     { border-radius: var(--pf-radius-md); }
.pf-rounded-lg  { border-radius: var(--pf-radius-xl); }
.pf-rounded-full { border-radius: var(--pf-radius-full); }

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

.pf-gap-4 { gap: var(--pf-space-4); }
.pf-gap-6 { gap: var(--pf-space-6); }
.pf-gap-8 { gap: var(--pf-space-8); }

.pf-mt-4  { margin-top: var(--pf-space-4); }
.pf-mb-4  { margin-bottom: var(--pf-space-4); }
.pf-mt-8  { margin-top: var(--pf-space-8); }
.pf-mb-8  { margin-bottom: var(--pf-space-8); }
.pf-mt-12 { margin-top: var(--pf-space-12); }
.pf-mb-12 { margin-bottom: var(--pf-space-12); }

/* Color utilities */
.pf-text-primary-color { color: var(--pf-primary); }
.pf-text-cyan          { color: var(--pf-cyan); }
.pf-text-muted         { color: var(--pf-text-muted); }
.pf-text-white         { color: var(--pf-text-primary); }

.pf-bg-surface  { background: var(--pf-bg-surface); }
.pf-bg-elevated { background: var(--pf-bg-elevated); }