/**
 * Theme Name: Full Ahead Slow
 * Theme URI: https://antsmusic.co.uk
 * Description: Classic theme for Full Ahead Slow album sales funnel with WooCommerce integration
 * Author: Ant Biggs
 * Author URI: https://antsmusic.co.uk
 * Template: twentytwentyone
 * Version: 7.0.2 (Unified Input Heights + Checkout Styling)
 * License: GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: full-ahead-slow
 *
 * === V7.0.1 UPDATES ===
 * - Restored complete WooCommerce checkout styling from V6.0.1
 * - Fixed album artwork sizing in "What's Included" section
 * - Maintained all V7.0.0 unified 40px input heights
 * - Added details-row and album-art grid styling
 * - Complete floating labels compatibility
 * 
 * TABLE OF CONTENTS:
 * 1. Design Tokens (CSS Variables)
 * 2. Global Resets & Typography
 * 3. Custom Fonts
 * 4. Layout System (Containers, Header, Footer)
 * 5. Forms & Buttons
 * 6. Navigation
 * 7. Landing Page Components:
 *    7.1 Hero Section
 *    7.2 Audio Player
 *    7.3 Sticky Banner (Player + Cart + Qualification)
 *    7.4 Selection Section (V4.1 - Unified Grid System)
 *    7.5 Qualification Popup
 * 8. WooCommerce Overrides
 * 8.1 WooCommerce Checkout Styling (V7.0.1 - From V6.0.1)
 * 9. Site-Wide Notifications
 * 10. Order Received Page
 * 11. Block Editor Companion
 * 12. Twenty Twenty-One Overrides (Nuclear Options)
 * 13. Utility Classes
 * 14. Responsive Breakpoints
 * 15. Accessibility
 */

/* ============================================================================
   1. DESIGN TOKENS - Single Source of Truth
   ============================================================================ */
:root {
    /* Colors */
    --color-bg-dark: #1a1a1a;
    --color-bg-light: #ffffff;
    --color-text-light: #ffffff;
    --color-text-dark: #1a1a1a;
    --color-accent: #d8c04e;        /* Warm yellow */
    --color-accent-muted: #9c8a7c;  /* Muted brown */
    --color-accent-gold: #d3a75a;   /* Gold tone */
    
    /* Typography */
    --font-size-base: 26px;
    --font-size-medium: 26px;
    --font-size-large: 34px;
    --font-family: 'AntFont', sans-serif;
    
    /* Spacing */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 60px;
    
    /* Layout */
    --max-width: 800px;
    --border-radius: 8px;
    --sticky-player-height: 80px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
}

/* ============================================================================
   2. GLOBAL RESETS & TYPOGRAPHY
   ============================================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 900;
    line-height: 1.6;
    background: var(--color-bg-dark);
    color: var(--color-text-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 900;
    line-height: 1.3;
    margin-bottom: var(--space-sm);
}

h1 {
    font-size: var(--font-size-large);
}

h2, h3, h4, h5, h6 {
    font-size: var(--font-size-medium);
}

p {
    margin-bottom: var(--space-sm);
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

a:hover {
    opacity: 0.8;
}

ul, ol {
    margin-bottom: var(--space-sm);
    padding-left: var(--space-md);
}

/* ============================================================================
   3. CUSTOM FONTS
   ============================================================================ */
@font-face {
    font-family: 'AntFont';
    src: url('/wp-content/themes/full-ahead-slow/fonts/AntFont.woff2') format('woff2'),
         url('/wp-content/themes/full-ahead-slow/fonts/AntFont.woff') format('woff'),
         url('/wp-content/themes/full-ahead-slow/fonts/AntFont.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ============================================================================
   4. LAYOUT SYSTEM
   ============================================================================ */

/* Site container */
.site-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-main {
    flex: 1;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-md) 0;
}

/* Content wrapper - centers with max-width */
.content-wrapper {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-sm);
}

/* White content boxes */
.content-container,
.section-wrapper {
    background: var(--color-bg-light);
    color: var(--color-text-dark);
    padding: 10px;
    border-radius: var(--border-radius);
    margin: 0 10px var(--space-lg) 10px;
    box-sizing: border-box;
}

.content-container *,
.section-wrapper * {
    color: var(--color-text-dark);
}

/* Section titles (gold on dark background) */
.section-title-dark {
    font-size: var(--font-size-medium);
    color: var(--color-accent-gold);
    margin: var(--space-lg) 0 var(--space-xs) 0;
    padding: 0;
    text-align: left;
}

.section-title-dark:first-of-type {
    margin-top: 0;
}

/* Header - Full Width Dark Background */
.site-header {
    width: 100%;
    background: var(--color-bg-dark);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0;
}

.site-header .content-wrapper {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-md) var(--space-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-title {
    font-size: var(--font-size-medium);
    color: var(--color-accent);
    text-decoration: none;
    margin: 0;
}

.site-title:hover {
    opacity: 0.8;
}

/* Hide header on landing page */
.page-template-page-landing .site-header {
    display: none;
}

/* Footer - Full Width Dark Background */
.site-footer {
    width: 100%;
    background: var(--color-bg-dark);
    color: var(--color-text-light);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: var(--space-xl);
    padding: 0;
}

.site-footer > .content-wrapper {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-xl) var(--space-sm) var(--space-md);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.footer-section h3 {
    font-size: var(--font-size-medium);
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
}

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

.footer-section li {
    margin-bottom: var(--space-xs);
}

.footer-section a {
    color: var(--color-text-light);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-section a:hover {
    color: var(--color-accent);
}

.footer-bottom {
    text-align: center;
    padding-top: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0.6;
}

.footer-bottom a {
    color: var(--color-accent);
}

/* ============================================================================
   5. FORMS & BUTTONS
   ============================================================================ */

/* Form fields */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
select {
    width: 100%;
    height: 40px; /* Unified height across all inputs */
    padding: 0 var(--space-sm); /* Horizontal padding only */
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    font-weight: 900;
    background: var(--color-bg-light);
    color: var(--color-text-dark);
    border: 1px solid var(--color-accent-muted); /* Unified 1px border */
    border-radius: var(--border-radius);
    transition: border-color var(--transition-fast);
    line-height: 40px; /* Perfect vertical centering */
    box-sizing: border-box;
}

/* Textarea needs different height handling */
textarea {
    width: 100%;
    min-height: 80px; /* Allow vertical resize */
    padding: var(--space-sm); /* Standard padding for multi-line */
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    font-weight: 900;
    background: var(--color-bg-light);
    color: var(--color-text-dark);
    border: 1px solid var(--color-accent-muted);
    border-radius: var(--border-radius);
    transition: border-color var(--transition-fast);
    line-height: 1.6; /* Normal line height for readability */
    box-sizing: border-box;
    resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-accent-gold); /* Gold for active state */
}

/* Hover states */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
textarea:hover,
select:hover {
    border-color: var(--color-accent-gold);
}

label {
    display: block;
    font-size: var(--font-size-base);
    margin-bottom: var(--space-xs);
}

input[type="checkbox"],
input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.form-group {
    margin-bottom: var(--space-md);
}

/* Standard buttons 
button,
input[type="submit"],
input[type="button"],
.button {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    font-weight: 900;
    background: var(--color-text-dark);
    color: var(--color-bg-light);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    height: 44px;  Buttons stay at 44px for better touch targets 
    line-height: 1;
    display: inline-block;
    box-sizing: border-box;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

 Secondary button variant 
.button-secondary {
    background: transparent;
    color: var(--color-text-dark);
    border: 2px solid var(--color-text-dark);
}

.button-secondary:hover {
    background: var(--color-text-dark);
    color: var(--color-bg-light);
}*/

/* ============================================================================
   6. NAVIGATION
   ============================================================================ */

.main-navigation {
    display: flex;
    gap: var(--space-md);
}

.main-navigation a {
    color: var(--color-text-light);
    font-size: var(--font-size-base);
    transition: color var(--transition-fast);
}

.main-navigation a:hover {
    color: var(--color-accent);
}

.menu-toggle {
    display: none;
    background: transparent;
    border: 2px solid var(--color-text-light);
    color: var(--color-text-light);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-base);
    min-height: 44px;
    min-width: 44px;
}

.menu-toggle:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.page-template-page-landing .menu-toggle {
    display: none !important;
}

/* ============================================================================
   7. LANDING PAGE COMPONENTS
   ============================================================================ */

/* 7.0 Landing Page Container */
.landing-page-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0;
}

.landing-page-main {
    padding-top: var(--space-lg);
}

/* 7.1 Hero Section */
.hero-section {
    padding: 0;
    margin-bottom: var(--space-lg);
    text-align: center;
}

.album-artwork {
    width: 100%;
    max-width: var(--max-width);
    height: 400px;
    overflow: hidden;
    border-radius: var(--border-radius);
    position: relative;
    margin: 0 auto;
}

.album-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.album-overlay-text {
    position: absolute;
    bottom: 5px;
    right: 0;
    width: 50%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    padding: var(--space-lg);
    text-align: right;
    z-index: 10;
}

.overlay-title,
.overlay-artist {
    font-size: var(--font-size-large);
    color: var(--color-text-dark);
    margin: 0;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

/* 7.2 Audio Player (Track List in White Box) */
.track-list {
    max-height: 400px;
    overflow-y: auto;
}

.track-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 8px 5px;
    cursor: pointer;
    border-radius: var(--border-radius);
    transition: background var(--transition-fast);
    line-height: 1.4;
}

.track-item:hover {
    background: rgba(0, 0, 0, 0.03);
}

.track-item.active {
    background: rgba(0, 0, 0, 0.05);
}

.track-number {
    font-size: var(--font-size-base);
    color: #666;
    min-width: 30px;
    line-height: 1.4;
}

.track-name {
    font-size: var(--font-size-base);
    flex: 1;
    line-height: 1.4;
}

/* 7.3 Sticky Banner (Player + Cart + Qualification) */
.sticky-player-banner {
    position: sticky;
    top: 0;
    z-index: 101;
    background: var(--color-accent-gold);
    color: var(--color-text-dark);
    padding: var(--space-sm);
    margin: 0 0 var(--space-md) 0;
    width: 100%;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.sticky-player-controls {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.sticky-play-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-text-dark);
    color: var(--color-bg-light);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    flex-shrink: 0;
}

.sticky-play-btn:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

.play-icon,
.pause-icon {
    line-height: 1;
}

.pause-icon.hidden,
.play-icon.hidden {
    display: none;
}

.sticky-track-info {
    flex: 1;
    min-width: 0;
}

.sticky-track-title-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.qualified-icon {
    color: var(--color-accent);
    font-size: 14px;
    flex-shrink: 0;
}

.qualified-icon.hidden {
    display: none;
}

.sticky-track-title {
    font-size: var(--font-size-base);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sticky-format-label {
    font-size: 14px;
    opacity: 0.7;
    white-space: nowrap;
}

.sticky-track-time {
    font-size: 14px;
    opacity: 0.8;
}

.sticky-cart-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--color-text-dark);
    color: var(--color-bg-light);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: opacity var(--transition-fast);
    min-height: 44px;
    flex-shrink: 0;
}

.sticky-cart-summary:hover {
    opacity: 0.9;
}

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

.cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--color-accent);
    color: var(--color-text-dark);
    font-size: 11px;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.cart-total-amount {
    font-size: 16px;
    font-weight: 900;
}

.cart-discount {
    font-size: 14px;
    color: var(--color-accent);
}

.cart-discount.hidden {
    display: none;
}

.sticky-progress-bar {
    position: relative;
    height: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    cursor: pointer;
}

.sticky-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--color-text-dark);
    border-radius: 2px;
    transition: width 0.1s ease;
}

.sticky-progress-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Qualification Banner */
.qualification-banner {
    position: sticky;
    top: var(--sticky-player-height);
    z-index: 100;
    background: var(--color-accent);
    color: var(--color-text-dark);
    padding: var(--space-sm);
    margin: 0 0 var(--space-md) 0;
    text-align: center;
    border-radius: 0;
}

.qualification-banner.hidden {
    display: none;
}

.banner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.banner-icon {
    font-size: 18px;
}

.banner-text {
    font-size: var(--font-size-base);
    font-weight: 900;
}

/* ============================================================================
   7.4 SELECTION SECTION - V4.1 UNIFIED GRID SYSTEM
   All selection rows use identical layout for consistent behavior
   ============================================================================ */

.cart-section {
    background: var(--color-bg-light);
    color: var(--color-text-dark);
    padding: 10px;
    border-radius: var(--border-radius);
}

/* Qualify section */
.qualify-section {
    margin-bottom: var(--space-md);
}

/* Section subtitles - large & centered */
.section-subtitle {
    font-size: var(--font-size-large);
    text-align: center;
    margin-bottom: var(--space-md);
    color: var(--color-text-dark);
    font-weight: 900;
}

/* UNIFIED GRID SYSTEM - Base for all selection rows */
.selection-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    padding: 0 30px;
    margin-bottom: var(--space-sm);
}

/* Each item in the grid takes equal space */
.selection-item {
    min-width: 0; /* Allow flex children to shrink */
}

/* Spacer item for alignment (invisible placeholder) */
.selection-item-spacer {
    visibility: hidden;
}

/* DIGITAL SECTION */
.digital-section {
    margin-bottom: var(--space-lg);
}

/* Digital checkbox label - fills its grid cell */
.digital-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    min-height: 40px;
    width: 100%;
}

.digital-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

.checkbox-text {
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    font-weight: 900;
    white-space: nowrap;
}

/* Quality dropdown - fills its grid cell, matches button styling */
.quality-dropdown {
    min-height: 40px;
    height: 40px;
    padding: 0 32px 0 12px;
    font-size: var(--font-size-base);
    font-family: var(--font-family) !important;
    font-weight: 900;
    line-height: 40px;
    background: var(--color-bg-light);
    color: var(--color-text-dark);
    border: 1px solid var(--color-accent-muted); /* Consistent with form inputs */
    border-radius: var(--border-radius);
    cursor: pointer;
    width: 100%; /* Takes full width of grid cell */
    
    /* Custom arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%239c8a7c' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.quality-dropdown:focus {
    outline: none;
    border-color: var(--color-accent-gold); /* Gold focus state */
}

.quality-dropdown:hover {
    border-color: var(--color-accent-gold); /* Gold hover state */
}

/* Details toggle - simple text link */
.details-toggle {
    margin: 0 30px var(--space-sm) 30px;
    padding: 0;
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    font-weight: 900;
    background: transparent;
    color: var(--color-text-dark);
    border: none;
    cursor: pointer;
    text-decoration: underline;
    display: inline-block;
    transition: opacity var(--transition-fast);
}

.details-toggle:hover {
    opacity: 0.7;
}

/* Details row - uses unified grid with album art + list */
.details-row {
    align-items: start; /* Align items to top */
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
}

/* Album artwork in "What's Included" section - CONSTRAINED SIZE */
.details-album-art {
    width: 100%;
    max-width: 200px; /* CRITICAL: Prevent full-size display */
    height: auto;
    border-radius: var(--border-radius);
    display: block;
    border: 1px solid var(--color-accent-muted);
}

/* Details list styling */
.details-list {
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: #666;
    padding: 0;
}

.details-list ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.details-list ul li {
    padding: 4px 0;
    line-height: 1.6;
    position: relative;
    padding-left: 20px;
}

.details-list ul li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-accent-gold);
    font-weight: 900;
}

/* Hidden state for details */
.details-row.hidden {
    display: none;
}

/* Section divider */
.section-divider {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    margin: var(--space-lg) 0;
}

/* PHYSICAL SECTION */
.physical-section {
    margin-bottom: var(--space-lg);
}

.product-option {
    margin-bottom: var(--space-md);
}

.product-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 8px 30px;
    cursor: pointer;
    border-radius: var(--border-radius);
    transition: background var(--transition-fast);
    line-height: 1.4;
}

.product-label:hover {
    background: rgba(0, 0, 0, 0.02);
}

.product-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
}

.product-name {
    flex: 1;
    font-size: var(--font-size-base);
    font-weight: 900;
}

.product-price {
    font-size: var(--font-size-base);
    font-weight: 900;
    color: var(--color-text-dark);
}

/* T-shirt size dropdown - same styling as quality dropdown */
.tshirt-size-dropdown {
    min-height: 40px;
    height: 40px;
    padding: 0 32px 0 12px;
    font-size: var(--font-size-base);
    font-family: var(--font-family) !important;
    font-weight: 900;
    line-height: 40px;
    background: var(--color-bg-light);
    color: var(--color-text-dark);
    border: 1px solid var(--color-accent-muted); /* Consistent with form inputs */
    border-radius: var(--border-radius);
    cursor: pointer;
    width: 100%; /* Takes full width of grid cell */
    
    /* Custom arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%239c8a7c' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.tshirt-size-dropdown.hidden {
    display: none;
}

.tshirt-size-dropdown:focus {
    outline: none;
    border-color: var(--color-accent-gold); /* Gold focus state */
}

.tshirt-size-dropdown:hover {
    border-color: var(--color-accent-gold); /* Gold hover state */
}

.tshirt-size-dropdown:focus {
    outline: none;
    border-color: var(--color-accent);
}

/* CART TOTAL */
.cart-total {
    margin-top: var(--space-md);
    padding: var(--space-sm) 30px;
    border-top: 2px solid var(--color-text-dark);
}

.total-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 1.4;
}

.total-label,
.total-amount {
    font-size: var(--font-size-medium);
    font-weight: 900;
    line-height: 1.4;
}

.total-amount {
    transition: all var(--transition-medium);
}

/* ACTION BUTTONS - Uses unified selection-row grid */
.action-buttons {
    margin-top: var(--space-md);
}

.qualify-btn,
.checkout-btn {
    padding: 10px;
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    font-weight: 900;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-fast);
    height: 40px;
    line-height: 1.2;
    width: 100%; /* Takes full width of grid cell */
    background: var(--color-accent-gold) !important; /* Gold background */
    color: var(--color-text-dark) !important; /* Dark text */
    border: 1px solid var(--color-accent-muted); /* Muted brown border */
}

.qualify-btn:hover,
.checkout-btn:hover {
    opacity: 0.9; /* Subtle transparency on hover */
}

.qualify-btn.hidden {
    display: none;
}

.checkout-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 7.5 Qualification Popup */
.qualification-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-medium);
}

.qualification-popup.active {
    opacity: 1;
    pointer-events: all;
}

.popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
}

.popup-content {
    position: relative;
    background: var(--color-bg-light);
    color: var(--color-text-dark);
    max-width: 500px;
    width: 100%;
    border-radius: var(--border-radius);
    padding: var(--space-lg);
    transform: scale(0.9);
    transition: transform var(--transition-medium);
}

.qualification-popup.active .popup-content {
    transform: scale(1);
}

.popup-close {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 24px;
    cursor: pointer;
    color: var(--color-text-dark);
}

.popup-close:hover {
    opacity: 0.6;
}

.popup-body {
    margin-top: var(--space-md);
}

.popup-title {
    font-size: var(--font-size-large);
    margin-bottom: var(--space-sm);
}

.popup-description {
    font-size: var(--font-size-base);
    color: #666;
    margin-bottom: var(--space-md);
}

.qualification-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.error-message {
    padding: var(--space-sm);
    background: #fee;
    color: #c00;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
}

.error-message.hidden {
    display: none;
}

.submit-btn {
    padding: var(--space-sm);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    font-weight: 900;
    background: var(--color-text-dark);
    color: var(--color-bg-light);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    min-height: 44px;
}

.submit-btn:hover {
    opacity: 0.9;
}

.submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================================
   8. WOOCOMMERCE OVERRIDES
   ============================================================================ */

.woocommerce {
    max-width: var(--max-width);
    margin: 0 auto;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background: var(--color-accent) !important;
    color: var(--color-text-dark) !important;
    padding: var(--space-md);
    margin: 0 0 var(--space-lg) 0;
    border-radius: 0;
    text-align: center;
    border: none !important;
    font-size: var(--font-size-base) !important;
    font-weight: 900 !important;
}

.woocommerce-error {
    background: #dc3545 !important;
    color: var(--color-text-light) !important;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    display: none !important;
}

.woocommerce div.product {
    background: var(--color-bg-light);
    color: var(--color-text-dark);
    padding: var(--space-lg);
    border-radius: var(--border-radius);
    margin: var(--space-xs);
}

.woocommerce div.product .price {
    color: var(--color-accent);
    font-size: var(--font-size-medium);
}

.woocommerce #place_order {
    width: 100%;
    background: var(--color-text-dark);
    color: var(--color-bg-light);
    font-size: var(--font-size-base);
    padding: var(--space-sm);
    min-height: 44px;
}


/* ============================================================================
   8.1 WOOCOMMERCE CHECKOUT STYLING
   ========================================================================== */

/* Order Review at Top
   ========================================================================== */
.order-review-top {
    margin-bottom: var(--space-md);
}

/* Order Review Table */
.woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-md);
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: var(--space-sm);
    text-align: left;
    border-bottom: 1px solid var(--color-accent-muted);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    font-weight: 900;
    color: var(--color-text-dark) !important;
}

.woocommerce-checkout-review-order-table thead th {
    background: rgba(0, 0, 0, 0.02);
}

.woocommerce-checkout-review-order-table .cart-subtotal th,
.woocommerce-checkout-review-order-table .cart-subtotal td,
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
    font-size: var(--font-size-medium);
    padding-top: var(--space-md);
}

.woocommerce-checkout-review-order-table .order-total {
    border-top: 2px solid var(--color-accent-muted);
}

.woocommerce-checkout-review-order-table .product-name a {
    color: var(--color-text-dark);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.woocommerce-checkout-review-order-table .product-name a:hover {
    color: var(--color-accent-gold);
}

.woocommerce-checkout-review-order-table .product-quantity {
    color: #666;
    font-size: calc(var(--font-size-base) * 0.9);
}

/* Checkout Page Header
   ========================================================================== */

/* Remove parent theme entry header styling */
body.woocommerce-checkout .entry-header {
	border-bottom: none;
	padding: 0;
	margin: 0;
}

/* Full-width header bar matching player style */
body.woocommerce-checkout .entry-header {
	background: var(--color-accent-gold);
	color: var(--color-text-dark);
	padding: var(--space-sm);
	margin: 0 0 var(--space-md) 0;
	width: 100%;
	border-radius: 0;
	box-sizing: border-box;
}

body.woocommerce-checkout .entry-header * {
	color: var(--color-text-dark);
}

/* Checkout page title */
body.woocommerce-checkout .entry-title {
	font-size: var(--font-size-medium);
	margin: 0;
	padding: 0;
	text-align: left;
}

/* Checkout Form Layout
   ========================================================================== */

/* Override WooCommerce table layout for full width */
body.woocommerce-checkout form.checkout,
body.woocommerce-checkout form[name="checkout"] {
	display: block !important;
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
}

/* Full width for all checkout sections */
body.woocommerce-checkout .col2-set,
body.woocommerce-checkout #customer_details,
body.woocommerce-checkout .col-1,
body.woocommerce-checkout .col-2 {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

/* Hide empty shipping and col-2 wrapper */
/*body.woocommerce-checkout .woocommerce-shipping-fields,*/
body.woocommerce-checkout #customer_details .col-2:empty {
	display: none !important;
}

/* Remove spacing from customer_details when hidden */
body.woocommerce-checkout #customer_details {
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	gap: 0 !important;
	min-height: 0 !important;
}

/* Collapse customer_details when children are hidden */
body.woocommerce-checkout #customer_details:not(.visible) {
	display: none !important;
}

body.woocommerce-checkout #customer_details.visible {
	display: flex !important;
	gap: var(--space-md);
	margin-bottom: var(--space-md);
}

/* Hide duplicate/default order review section at bottom */
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout #order_review.woocommerce-checkout-review-order {
	display: none !important;
}

/* Toggle Button for Billing Form
   ========================================================================== */

/* Full width for express payment buttons and toggle */
body.woocommerce-checkout .wcpay-express-checkout-wrapper,
body.woocommerce-checkout #wc-stripe-express-checkout-element,
body.woocommerce-checkout .billing-toggle-wrapper,
body.woocommerce-checkout #billing-toggle-wrapper {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.billing-toggle-wrapper {
	margin: var(--space-md) 0;
	text-align: center;
}

.show-billing-btn {
	background: var(--color-bg-light);
	color: var(--color-text-dark);
	border: 1px solid var(--color-accent-muted);
	padding: 10px var(--space-md) 14px var(--space-md);
	font-size: var(--font-size-base);
	font-family: var(--font-family);
	font-weight: 900;
	cursor: pointer;
	border-radius: var(--border-radius);
	display: block;
	width: 100%;
	text-align: center;
	line-height: 1;
	transition: all var(--transition-fast);
	min-height: 44px;
}

.show-billing-btn:hover {
	border-color: var(--color-accent-gold);
	background: var(--color-accent-gold);
}

.show-billing-btn .toggle-icon {
	transition: transform var(--transition-fast);
	font-size: 14px;
}

.show-billing-btn.active .toggle-icon {
	transform: rotate(180deg);
}

/* Hide all manual payment sections by default */
.woocommerce-billing-fields,
.woocommerce-additional-fields,
#customer_details,
#payment {
	display: none !important;
	animation: slideDown 0.3s ease;
}

.woocommerce-billing-fields.visible,
.woocommerce-additional-fields.visible,
#customer_details.visible,
#payment.visible {
	display: block !important;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* Billing Fields Container - includes shipping and notes
   ========================================================================== */

.woocommerce-billing-fields {
	background: var(--color-bg-light);
	padding: var(--space-md);
	border-radius: var(--border-radius);
	margin-bottom: var(--space-md);
}

.woocommerce-billing-fields h3 {
	margin-top: 0;
	margin-bottom: var(--space-md);
	color: var(--color-text-dark);
}

/* Shipping fields inside billing container */
.shipping-fields-in-billing {
	margin-top: var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 2px solid var(--color-accent-muted);
}

.shipping-fields-in-billing h3 {
	margin-bottom: var(--space-md);
}

.shipping-fields-in-billing h3 label {
	font-size: var(--font-size-base);
	font-weight: 900;
	color: var(--color-text-dark);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.shipping-fields-in-billing h3 input[type="checkbox"] {
	width: 20px;
	height: 20px;
	cursor: pointer;
	margin: 0;
}

/* Order notes inside billing container */
.order-notes-in-billing {
	margin-top: var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 2px solid var(--color-accent-muted);
}

.order-notes-in-billing label {
	font-size: var(--font-size-base);
	font-weight: 900;
	color: var(--color-text-dark);
	margin-bottom: var(--space-sm);
	display: block;
}

/* Hide the separate additional fields section */
.woocommerce-additional-fields {
	display: none !important;
}
/* Payment Section
   ========================================================================== */

/* Payment container - white box like other sections */
#payment.woocommerce-checkout-payment {
	background: var(--color-bg-light);
	padding: var(--space-md);
	border-radius: var(--border-radius);
	margin: var(--space-md) 0;
}

/* Hide payment method list styling */
#payment .wc_payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
}

#payment .wc_payment_method {
	margin: 0;
	padding: 0;
}

/* Hide the radio button and "Stripe" label */
#payment .input-radio,
#payment label[for="payment_method_stripe"] {
	display: none;
}

/* Test mode notice styling */
#payment .wc-stripe-payment-method-instruction {
	background: var(--color-bg-light);
	border: 1px solid var(--color-accent-muted);
	border-radius: var(--border-radius);
	padding: var(--space-sm);
	margin-bottom: var(--space-md);
	font-size: 16px;
	line-height: 1.4;
}

#payment .wc-stripe-payment-method-instruction strong {
	color: var(--color-text-dark);
}

#payment .wc-stripe-payment-method-instruction a {
	color: var(--color-accent-gold);
	text-decoration: underline;
}

/* Stripe card input container */
#payment .payment_box {
	padding: 0;
	background: transparent;
	border: none;
	margin: 0;
}

#payment .wc-stripe-upe-element {
	margin: var(--space-sm) 0;
}

/* Place Order Button */
.form-row.place-order {
	padding: 0;
	margin: var(--space-md) 0 0 0;
}

#place_order {
	background: var(--color-accent-gold);
	color: var(--color-text-dark);
	border: none;
	padding: 10px var(--space-md) 14px var(--space-md);
	font-size: var(--font-size-base);
	font-family: var(--font-family);
	font-weight: 900;
	line-height: 1;
	cursor: pointer;
	border-radius: var(--border-radius);
	width: 100%;
	min-height: 44px;
	transition: all var(--transition-fast);
}

#place_order:hover {
	background: var(--color-accent);
	transform: scale(1.01);
}

/* Hide PayPal express buttons that appear in payment section */
#ppc-button-ppcp-applepay,
#ppc-button-ppcp-googlepay,
.ppcp-messages {
	display: none !important;
}

/* ============================================================================
   END WOOCOMMERCE CHECKOUT STYLING
   ============================================================================ */
   
/* ============================================================================
   9. SITE-WIDE NOTIFICATIONS
   ============================================================================ */

.site-notice {
    position: relative;
    padding: var(--space-sm);
    margin-bottom: var(--space-md);
    text-align: center;
    border-radius: 0;
    font-size: var(--font-size-base);
    font-weight: 900;
}

.site-notice-success {
    background: var(--color-accent);
    color: var(--color-text-dark);
}

.site-notice-error {
    background: #dc3545;
    color: var(--color-text-light);
}

/* ============================================================================
   10. ORDER RECEIVED PAGE
   ============================================================================ */

.woocommerce-order-received h1 {
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
}

.order-received-message {
    background: var(--color-accent) !important;
    color: var(--color-text-dark) !important;
    padding: var(--space-md);
    border-radius: var(--border-radius);
    text-align: center;
    font-weight: 900;
    margin: 0 0 var(--space-lg) 0;
}

/* ============================================================================
   11. BLOCK EDITOR COMPANION
   ============================================================================ */

.wp-site-blocks,
.wp-block-group__inner-container {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

body .is-layout-constrained > * {
    max-width: var(--max-width);
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================================================
   12. TWENTY TWENTY-ONE OVERRIDES - NUCLEAR OPTIONS
   ============================================================================ */

/* Remove Twenty Twenty-One max-width constraints */
.site,
#page,
#content,
#primary,
.site-content {
    max-width: 100% !important;
    padding: 0 !important;
}

/* NUCLEAR OPTION 1: Force AntFont on ALL elements site-wide */
body,
body *,
button,
input,
select,
option,
optgroup,
textarea,
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family) !important;
    font-weight: 900 !important;
}

/* Ensure dark background is truly global */
body {
    background: var(--color-bg-dark) !important;
    color: var(--color-text-light) !important;
}

.site,
#page {
    background: var(--color-bg-dark) !important;
}

/* NUCLEAR OPTION 2: Force AntFont in dropdown options (browser-specific) */
select option {
    font-family: var(--font-family) !important;
    font-weight: 900 !important;
}

select, 
select * {
    font-family: var(--font-family) !important;
    font-weight: 900 !important;
}

select::-webkit-option {
    font-family: var(--font-family) !important;
    font-weight: 900 !important;
}

/* Landing page specific overrides */
.page-template-page-landing #content,
.page-template-page-landing .entry-content,
.page-template-page-landing .entry-header {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.page-template-page-landing .entry-header {
    display: none !important;
}

/* ============================================================================
   13. UTILITY CLASSES
   ============================================================================ */

.hidden {
    display: none !important;
}

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

/* ============================================================================
   14. RESPONSIVE BREAKPOINTS
   ============================================================================ */

@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    
    .main-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-bg-dark);
        flex-direction: column;
        padding: var(--space-md);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .main-navigation.is-open {
        display: flex;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    :root {
        --font-size-large: 24px;
        --font-size-medium: 22px;
        --font-size-base: 22px;
        --space-lg: 32px;
        --space-xl: 48px;
    }
    
    .landing-page-main {
        padding-top: var(--space-md);
    }
    
    .album-artwork {
        height: 300px;
    }
    
    /* All selection rows stack to single column on mobile */
    .selection-row {
        grid-template-columns: 1fr;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* Spacer becomes invisible on mobile (no longer needed) */
    .selection-item-spacer {
        display: none;
    }
    
    .details-toggle,
    .selection-included {
        margin-left: 20px;
        margin-right: 20px;
    }
    
    .sticky-track-title {
        font-size: 14px;
    }
}

/* ============================================================================
   15. ACCESSIBILITY
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--color-accent);
    color: var(--color-text-dark);
    padding: var(--space-sm);
    z-index: 1000;
}

.skip-link:focus {
    top: 0;
}

/* ============================================================================
   END OF RATIONALIZED STYLESHEET
   Version: 7.0.1 (Unified Input Heights + Complete Checkout Styling)
   Lines: ~2000
   - Restored complete WooCommerce checkout styling from V6.0.1
   - Fixed album artwork sizing (max-width: 200px) in "What's Included"
   - Unified all input heights to 40px with proper line-height
   - Complete white content boxes for checkout page
   - Single column checkout layout (mobile-first)
   - All V6 grid system functionality maintained
   - Perfect floating labels compatibility
   ============================================================================ */
   
   /* DEBUG - Checkout layout structure 
*.woocommerce-checkout {
*    border: 2px solid red;
}

.col2-set {
    border: 2px solid blue;
}

#order_review,
#order_review_heading {
    border: 2px solid green;
}

* Order review at top styling 
.order-review-top {
    margin-bottom: var(--space-md);
}*/