.woocommerce ul.products.columns-4 li.product {
/*     width: 33.3333% !important; */
}
/* Emergency font fix - prevents layout shift */
@font-face {
    font-display: swap !important;
}

.wpforms-form,
.tatsu-column-pad-wrap,
.special-subtitle,
body, h1, h2, h3, h4, h5 {
    font-display: swap !important;
}

/* ------------------------------------------------------------------
   WPFORMS CUSTOM STYLING
   Theme: Ocean (Replica)
   Font: Open Sans
   Button: Black (Custom Override)
   ------------------------------------------------------------------ */

/* Load Font (If your theme doesn't already load Open Sans) */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');

/* GLOBAL FONT DISPLAY SETTINGS */
.wpforms-form,
.tatsu-column-pad-wrap,
.special-subtitle,
body, h1, h2, h3, h4, h5 {
    font-display: swap !important;
}

:root {
    /* --- THEME SETTINGS --- */
    
    /* Container Settings */
    --wpforms-container-padding: 30px;
    --wpforms-container-border: 1px solid #f0f0f0;
    --wpforms-container-radius: 10px;
    --wpforms-container-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --wpforms-container-bg: #ffffff;

    /* Field Settings (Inputs) */
    --wpforms-field-bg: #ffffff;
    --wpforms-field-border: 1px solid #9ea3a3;
    --wpforms-field-radius: 4px;
    --wpforms-field-text-color: #181c1c;
    --wpforms-field-padding: 8px 12px;
    
    /* Label Settings */
    --wpforms-label-color: #262929;
    --wpforms-sublabel-color: #636c6c;
    --wpforms-error-color: #d63636;
    --wpforms-label-size: 14px;
    --wpforms-label-weight: 600;

    /* Button Settings (Black Override) */
    --wpforms-btn-bg: #000000;
    --wpforms-btn-text: #ffffff;
    --wpforms-btn-border: 1px solid #000000;
    --wpforms-btn-radius: 3px;
    --wpforms-btn-padding: 10px 20px;

    /* Typography */
    --wpforms-font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Main Form Container */
div.wpforms-container-full, 
div.wpforms-container {
    background-color: var(--wpforms-container-bg) !important;
    padding: var(--wpforms-container-padding) !important;
    border: var(--wpforms-container-border) !important;
    border-radius: var(--wpforms-container-radius) !important;
    box-shadow: var(--wpforms-container-shadow) !important;
    font-family: var(--wpforms-font-family) !important;
}

/* Form Title */
div.wpforms-container-full .wpforms-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--wpforms-label-color) !important;
    margin-bottom: 10px !important;
}

/* Form Description */
div.wpforms-container-full .wpforms-description {
    font-size: 14px !important;
    color: var(--wpforms-sublabel-color) !important;
    line-height: 1.5 !important;
    margin-bottom: 25px !important;
}

/* Labels */
div.wpforms-container-full .wpforms-form .wpforms-field-label {
    font-weight: var(--wpforms-label-weight) !important;
    font-size: var(--wpforms-label-size) !important;
    color: var(--wpforms-label-color) !important;
    margin-bottom: 6px !important;
    font-family: var(--wpforms-font-family) !important;
    white-space: nowrap !important; /* Prevent text wrapping */
}

/* Sub-labels (First, Last, etc.) */
div.wpforms-container-full .wpforms-form .wpforms-field-sublabel {
    font-size: 13px !important;
    color: var(--wpforms-sublabel-color) !important;
    font-family: var(--wpforms-font-family) !important;
    font-weight: 400 !important;
    white-space: nowrap !important; /* Prevent text wrapping */
}

/* Input Fields */
div.wpforms-container-full .wpforms-form input[type=text],
div.wpforms-container-full .wpforms-form input[type=email],
div.wpforms-container-full .wpforms-form input[type=number],
div.wpforms-container-full .wpforms-form input[type=url],
div.wpforms-container-full .wpforms-form input[type=search],
div.wpforms-container-full .wpforms-form input[type=tel],
div.wpforms-container-full .wpforms-form select,
div.wpforms-container-full .wpforms-form textarea {
    background-color: var(--wpforms-field-bg) !important;
    border: var(--wpforms-field-border) !important;
    border-radius: var(--wpforms-field-radius) !important;
    padding: var(--wpforms-field-padding) !important;
    font-size: 14px !important;
    color: var(--wpforms-field-text-color) !important;
    font-family: var(--wpforms-font-family) !important;
    box-shadow: none !important;
}

/* Input Focus State */
div.wpforms-container-full .wpforms-form input:focus,
div.wpforms-container-full .wpforms-form select:focus,
div.wpforms-container-full .wpforms-form textarea:focus {
    border-color: var(--wpforms-label-color) !important;
    outline: none !important;
}

/* Checkboxes & Radios */
div.wpforms-container-full .wpforms-form .wpforms-field-radio li, 
div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li {
    font-size: 14px !important;
    color: var(--wpforms-field-text-color) !important;
    font-family: var(--wpforms-font-family) !important;
    margin-bottom: 6px !important;
}

/* Submit Button */
div.wpforms-container-full .wpforms-form button[type=submit] {
    background-color: var(--wpforms-btn-bg) !important;
    color: var(--wpforms-btn-text) !important;
    border: var(--wpforms-btn-border) !important;
    border-radius: var(--wpforms-btn-radius) !important;
    padding: var(--wpforms-btn-padding) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-transform: none !important; /* Reset uppercase if inherited */
    font-family: var(--wpforms-font-family) !important;
    transition: opacity 0.2s ease;
    white-space: nowrap !important; /* Prevent text wrapping */
}

div.wpforms-container-full .wpforms-form button[type=submit]:hover {
    opacity: 0.9 !important;
    background-color: var(--wpforms-btn-bg) !important; /* Keep black on hover */
}

/* ------------------------------------------------------------------
   WPFORMS INDICATORS (Page Steps)
   ------------------------------------------------------------------ */

/* 1. Container Spacing */
.wpforms-page-indicator.wpforms-page-indicator-circles {
    margin-bottom: 60px !important; /* Slightly more breathing room */
}

/* 2. The Text Labels */
.wpforms-page-indicator-page-title {
    font-family: inherit !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important; /* Increased for ethereal luxury feel */
    font-weight: 600 !important;
    color: #a5a5a5 !important; 
    margin-top: 15px !important;
    transition: all 0.4s ease !important; /* Smooth color transition */
}

/* Active Step Text (Deep Forest Green) */
.wpforms-page-indicator-page.active .wpforms-page-indicator-page-title {
    color: #1b3022 !important; /* Deep Forest Green */
}

/* 3. The Circles (The Numbers) */
.wpforms-page-indicator-page-number {
    background-color: #fff !important;
    border: 1px solid #e0e0e0 !important;
    color: #a5a5a5 !important;
    width: 30px !important; /* Slightly larger for better touch targets */
    height: 30px !important;
    line-height: 28px !important;
    font-size: 11px !important;
    box-shadow: none !important;
    transition: all 0.4s ease !important;
}

/* Active Circle (Current Step) */
.wpforms-page-indicator-page.active .wpforms-page-indicator-page-number {
    background-color: #1b3022 !important; /* Deep Forest Green */
    border-color: #1b3022 !important;
    color: #fff !important;
}

/* Completed Circle (Past Steps - Dusty Blue Grey) */
.wpforms-page-indicator-page.completed .wpforms-page-indicator-page-number {
    background-color: #708090 !important; /* Slate/Dusty Blue */
    border-color: #708090 !important;
    color: #fff !important;
}

/* 4. The Connecting Line */
.wpforms-page-indicator-page-progress-wrap {
    height: 1px !important;
    background-color: #f0f0f0 !important;
    top: 15px !important; /* Centered with the 30px circles */
}

/* The "Filled" Part of the Line */
.wpforms-page-indicator-page-progress {
    background-color: #1b3022 !important;
    height: 1px !important;
}

/* 5. Mobile Responsiveness */
@media (max-width: 600px) {
    /* Hide text labels on mobile to prevent overlapping */
    .wpforms-page-indicator-page-title {
        display: none !important;
    }
    .wpforms-page-indicator.wpforms-page-indicator-circles {
        margin-bottom: 30px !important;
    }
}


/* ==================================================================
   ADDED: WIDTH CONSTRAINT FIXES
   SCOPED TO PAGE ID 7503 ONLY (Farm to Table Events Form Page)
   Date: December 2024
   Issue: Form being trimmed on right side in published page
   ================================================================== */

/* ------------------------------------------------------------------
   SECTION 1: DIAGNOSTIC CODE (Force Full Width)
   Purpose: Override any theme/plugin width restrictions
   ------------------------------------------------------------------ */

/* Force form containers to use full available width - PAGE 7503 ONLY */
.page-id-7503 div.wpforms-container-full, 
.page-id-7503 div.wpforms-container {
    max-width: none !important;
    width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* Override parent container restrictions - PAGE 7503 ONLY */
.page-id-7503 .entry-content,
.page-id-7503 .site-content,
.page-id-7503 .main-content,
.page-id-7503 .page-content,
.page-id-7503 .post-content {
    max-width: 100% !important;
    overflow: visible !important;
}

/* Ensure individual form fields stay within bounds */
.page-id-7503 div.wpforms-container-full .wpforms-form .wpforms-field {
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* ------------------------------------------------------------------
   SECTION 2: MULTI-COLUMN LAYOUT FIXES
   Purpose: Fix Name fields and other row-based layouts
   ------------------------------------------------------------------ */

/* Fix for fields arranged in rows (like First/Last Name) */
.page-id-7503 div.wpforms-container-full .wpforms-field-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Each column in a row layout */
.page-id-7503 div.wpforms-container-full .wpforms-field-row .wpforms-field-row-block {
    flex: 1 1 calc(50% - 5px) !important;
    min-width: 0 !important; /* CRITICAL: Prevents flex items from overflowing */
    box-sizing: border-box !important;
}

/* Mobile: Stack columns vertically */
@media (max-width: 600px) {
    .page-id-7503 div.wpforms-container-full .wpforms-field-row .wpforms-field-row-block {
        flex: 1 1 100% !important;
    }
}

/* ------------------------------------------------------------------
   SECTION 3: INPUT FIELD OVERFLOW PREVENTION
   Purpose: Prevent text overflow in specific fields
   ------------------------------------------------------------------ */

/* Prevent text inputs from breaking container bounds */
.page-id-7503 div.wpforms-container-full .wpforms-form input[type=text],
.page-id-7503 div.wpforms-container-full .wpforms-form input[type=email],
.page-id-7503 div.wpforms-container-full .wpforms-form input[type=tel],
.page-id-7503 div.wpforms-container-full .wpforms-form input[type=url],
.page-id-7503 div.wpforms-container-full .wpforms-form select,
.page-id-7503 div.wpforms-container-full .wpforms-form textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

/* Ensure dropdowns don't overflow */
.page-id-7503 div.wpforms-container-full .wpforms-form select {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ------------------------------------------------------------------
   SECTION 4: SPECIFIC FIELD TYPE FIXES
   Purpose: Address known problematic field types
   ------------------------------------------------------------------ */

/* Fix for HTML/Content blocks that might have fixed widths */
.page-id-7503 div.wpforms-container-full .wpforms-field-html {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}

/* Fix for page break sections */
.page-id-7503 div.wpforms-container-full .wpforms-page {
    max-width: 100% !important;
    overflow: visible !important;
}

/* Ensure instruction text doesn't overflow */
.page-id-7503 div.wpforms-container-full .wpforms-field-description,
.page-id-7503 div.wpforms-container-full .wpforms-description {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}

/* ------------------------------------------------------------------
   SECTION 5: MOBILE-SPECIFIC OVERRIDES
   Purpose: Ensure forms work on small screens
   ------------------------------------------------------------------ */

@media (max-width: 768px) {
    /* Reduce container padding on mobile to maximize space */
    .page-id-7503 div.wpforms-container-full, 
    .page-id-7503 div.wpforms-container {
        padding: 20px 15px !important;
    }
    
    /* Ensure form takes full mobile width */
    .page-id-7503 div.wpforms-container-full {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

/* ------------------------------------------------------------------
   SECTION 6: DEBUGGING AIDS (Comment out after issue is resolved)
   Purpose: Visual indicators to identify constraint source
   ------------------------------------------------------------------ */

/* 
   UNCOMMENT BELOW TO SEE CONTAINER BOUNDARIES:
   
.page-id-7503 div.wpforms-container-full {
    outline: 3px solid red !important;
}

.page-id-7503 div.wpforms-container-full .wpforms-field {
    outline: 1px dashed blue !important;
}

.page-id-7503 .entry-content,
.page-id-7503 .site-content,
.page-id-7503 .main-content {
    outline: 2px solid green !important;
}
*/