/**
 * Printoma Custom CSS
 * 
 * Additional styles to complement Tailwind CSS
 * 
 * FILE STRUCTURE:
 * 1. Global Font Weight Overrides
 * 2. Global Overflow Prevention
 * 3. Topbar Styling
 * 4. WooCommerce Notices Styling
 * 5. Product Page Styles
 * 6. Cart & Checkout Styles
 * 7. MakeCommerce Parcel Selector Styles
 * 8. Select2 Dropdown Styling
 * 9. Form Field Styling
 * 10. Mobile Responsive Styles
 * 
 * @package Printoma
 */

/* =============================================================================
   GLOBAL FONT WEIGHT OVERRIDES
   ============================================================================= */
.font-black {
    font-weight: 700 !important;
}

/* =============================================================================
   TOPBAR STYLING
   ============================================================================= */
.printoma-topbar {
    width: 100%;
    padding: 0.5rem 1rem;
    text-align: center;
    font-size: 0.625rem; /* text-[10px] */
    font-weight: 700; /* font-bold */
    text-transform: uppercase;
    letter-spacing: 0.2em; /* tracking-[0.2em] */
    line-height: 1.5;
    z-index: 50;
}

.printoma-topbar-content {
    max-width: 100%;
    margin: 0 auto;
}

.printoma-topbar-content p {
    margin: 0;
    padding: 0;
}

.printoma-topbar-content * {
    margin: 0;
    padding: 0;
}

.printoma-topbar-content * + * {
    margin-top: 0;
}

/* Adjust for admin bar */
body.admin-bar .printoma-topbar {
    position: relative;
}

@media (max-width: 782px) {
    .printoma-topbar {
        font-size: 0.625rem;
        padding: 0.5rem 0.75rem;
    }
}

/* =============================================================================
   GLOBAL OVERFLOW PREVENTION
   ============================================================================= */
html, body {
    max-width: 100vw;
    width: 100%;
    box-sizing: border-box;
}

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

#page, #content {
    max-width: 100%;
    width: 100%;
}

/* Apply overflow-x: hidden ONLY to checkout/cart page containers */
.woocommerce-checkout,
.woocommerce-cart {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

.woocommerce-checkout main,
.woocommerce-cart main,
.woocommerce-checkout #page,
.woocommerce-cart #page,
.woocommerce-checkout #content,
.woocommerce-cart #content {
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Comprehensive constraint for all checkout elements to prevent overflow */
.woocommerce-checkout *,
.woocommerce-cart * {
    max-width: 100%;
    box-sizing: border-box;
}

/* Allow specific elements to maintain their width */
.woocommerce-checkout table,
.woocommerce-cart table,
.woocommerce-checkout img,
.woocommerce-cart img {
    max-width: 100%;
    height: auto;
}
.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}

.section-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}
/* =============================================================================
   WOOCOMMERCE NOTICES STYLING
   ============================================================================= */
.single-product .woocommerce-notices-wrapper,
.woocommerce-notices-wrapper {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Remove WooCommerce default notice icons */
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
    display: none;
    content: none;
}

.woocommerce-error {
    background: rgb(254 242 242);
    border-left: 4px solid rgb(220 38 38);
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    list-style: none;
    margin: 0;
    position: relative;
}

.woocommerce-error li {
    color: rgb(153 27 27);
    font-weight: 700;
    font-size: 0.875rem;
    padding-left: 0;
}

.woocommerce-error li::before {
    display: none;
    content: none;
}

.woocommerce-message {
    background: rgb(240 253 244);
    border-left: 4px solid rgb(22 163 74);
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    color: rgb(20 83 45);
    font-weight: 700;
    font-size: 0.875rem;
    position: relative;
}

.woocommerce-message::before {
    display: none;
    content: none;
}

.woocommerce-info {
    background: rgb(239 246 255);
    border-left: 4px solid rgb(37 99 235);
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    color: rgb(30 64 175);
    font-weight: 700;
    font-size: 0.875rem;
    position: relative;
}

.woocommerce-info::before {
    display: none;
    content: none;
}

/* =============================================================================
   WOOCOMMERCE CART PAGE - DESKTOP TABLE VISIBILITY
   ============================================================================= */
/* Hide custom desktop cart table on mobile, show from md+ via markup class */
@media (max-width: 767px) {
    .woocommerce-cart .woocommerce-cart-form .desktop-cart-table {
        display: none;
    }
}

/* Titles removed at template level - no CSS needed */

/* =============================================================================
   CHECKOUT FORM FIELDS LAYOUT
   ============================================================================= */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Full width fields on desktop - these should span both columns */
    .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-wide {
        grid-column: 1 / -1;
    }
    
    /* Side by side fields - form-row-first and form-row-last */
    .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
    .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last {
        grid-column: span 1;
    }
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row {
    display: block;
    width: 100%;
    float: none;
    margin: 0;
    padding: 0;
    clear: none;
}

/* Remove top spacing from first child in checkout forms section */
.woocommerce-checkout section[aria-labelledby="checkout-forms-heading"] > *:first-child {
    margin-top: 0;
}

.woocommerce-checkout section[aria-labelledby="checkout-forms-heading"] > #customer_details {
    margin-top: 0;
}

.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
    width: 100%;
    float: none;
    clear: none;
}

.woocommerce-checkout .form-row-wide {
    width: 100%;
    float: none;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row label,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row label {
    display: block;
    width: 100%;
    margin-bottom: 0.5rem;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row input,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row select,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row textarea,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row input,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row select,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row textarea {
    width: 100%;
    display: block;
}

/* MakeCommerce parcel selector styling */
#makecommerce-shipping-omniva-container ul,
#makecommerce-shipping-omniva-container ol,
#makecommerce-shipping-omniva-container li,
#makecommerce-shipping-omniva-container * ul,
#makecommerce-shipping-omniva-container * ol,
#makecommerce-shipping-omniva-container * li,
#makecommerce-shipping-unisend-container ul,
#makecommerce-shipping-unisend-container ol,
#makecommerce-shipping-unisend-container li,
#makecommerce-shipping-unisend-container * ul,
#makecommerce-shipping-unisend-container * ol,
#makecommerce-shipping-unisend-container * li,
.makecommerce-shipping-container ul,
.makecommerce-shipping-container ol,
.makecommerce-shipping-container li,
.makecommerce-shipping-container * ul,
.makecommerce-shipping-container * ol,
.makecommerce-shipping-container * li {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

#makecommerce-shipping-omniva-container li::before,
#makecommerce-shipping-omniva-container li::after,
#makecommerce-shipping-omniva-container * li::before,
#makecommerce-shipping-omniva-container * li::after,
#makecommerce-shipping-unisend-container li::before,
#makecommerce-shipping-unisend-container li::after,
#makecommerce-shipping-unisend-container * li::before,
#makecommerce-shipping-unisend-container * li::after,
.makecommerce-shipping-container li::before,
.makecommerce-shipping-container li::after,
.makecommerce-shipping-container * li::before,
.makecommerce-shipping-container * li::after {
    content: none !important;
    display: none !important;
}

/* Style MakeCommerce parcel machine selectors to match Tailwind design */
#makecommerce-shipping-omniva-container,
#makecommerce-shipping-unisend-container {
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    float: none;
    clear: both;
    display: block;
    overflow: visible; /* Allow overflow for dropdowns */
}

/* Apply border styling only to .makecommerce-shipping-container */
.makecommerce-shipping-container {
    margin-top: 1rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 2.5rem !important;
    background: white !important;
    border: 1px solid rgb(241 245 249) !important; /* border-slate-100 to match other boxes */
    border-radius: 1.5rem !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
    display: block !important;
    overflow: visible !important; /* Allow overflow for dropdowns */
}

/* Remove any inner borders/padding that MakeCommerce might add to prevent double boxing */
#makecommerce-shipping-omniva-container > *:first-child,
#makecommerce-shipping-unisend-container > *:first-child,
.makecommerce-shipping-container > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#makecommerce-shipping-omniva-container > *:last-child,
#makecommerce-shipping-unisend-container > *:last-child,
.makecommerce-shipping-container > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#makecommerce-shipping-omniva-container select,
#makecommerce-shipping-unisend-container select,
.makecommerce-shipping-container select {
    width: 100% !important;
    max-width: 100% !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 1rem !important;
    padding: 1rem 1.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #334155 !important;
    outline: none !important;
    transition: all 0.2s !important;
    box-sizing: border-box !important;
}

#makecommerce-shipping-omniva-container select:focus,
#makecommerce-shipping-unisend-container select:focus {
    border-color: #4f46e5 !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1) !important;
}

#makecommerce-shipping-omniva-container table,
#makecommerce-shipping-unisend-container table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 1rem !important;
}

#makecommerce-shipping-omniva-container table th,
#makecommerce-shipping-unisend-container table th,
#makecommerce-shipping-omniva-container table td,
#makecommerce-shipping-unisend-container table td {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
    text-align: left !important;
}

#makecommerce-shipping-omniva-container table th,
#makecommerce-shipping-unisend-container table th {
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #94a3b8 !important;
}

#makecommerce-shipping-omniva-container table td,
#makecommerce-shipping-unisend-container table td {
    color: #334155 !important;
}

#makecommerce-shipping-omniva-container button,
#makecommerce-shipping-unisend-container button,
#makecommerce-shipping-omniva-container input[type="button"],
#makecommerce-shipping-unisend-container input[type="button"] {
    background: #4f46e5;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 1rem;
    font-weight: 900;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

#makecommerce-shipping-omniva-container button:hover,
#makecommerce-shipping-unisend-container button:hover,
#makecommerce-shipping-omniva-container input[type="button"]:hover,
#makecommerce-shipping-unisend-container input[type="button"]:hover {
    background: #1e293b;
}

/* Parcel label styling */
.parcel-selection-label {
    margin: 0 0 0.5rem 0;
    padding-top: 0;
    font-weight: 900;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Dark theme for cart totals */
.cart_totals #makecommerce-shipping-omniva-container,
.cart_totals #makecommerce-shipping-unisend-container {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.cart_totals #makecommerce-shipping-omniva-container select,
.cart_totals #makecommerce-shipping-unisend-container select {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.cart_totals #makecommerce-shipping-omniva-container select option,
.cart_totals #makecommerce-shipping-unisend-container select option {
    background: #1e293b;
    color: white;
}

.cart_totals #makecommerce-shipping-omniva-container table th,
.cart_totals #makecommerce-shipping-unisend-container table th {
    color: rgba(255, 255, 255, 0.6);
}

.cart_totals #makecommerce-shipping-omniva-container table td,
.cart_totals #makecommerce-shipping-unisend-container table td {
    color: white;
}

/* =============================================================================
   ADVANCED UPLOADER MODAL - TAILWIND STYLING
   ============================================================================= */
/* Modal container should exist in DOM but overlay hidden by default */
/* #advanced-uploader-modal - no styles needed, overlay handles visibility */

#advanced-uploader-modal .uploader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* Only show when .open class is added */
#advanced-uploader-modal .uploader-overlay.open {
    display: flex;
}

#advanced-uploader-modal .uploader-modal {
    background: #ffffff;
    border-radius: 1.5rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.35);
    max-width: 56rem;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#advanced-uploader-modal .uploader-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    overflow-x: hidden;
}

#advanced-uploader-modal .uploader-header {
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    overflow: hidden;
}

#advanced-uploader-modal .uploader-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid rgb(226 232 240);
    background: #f8fafc;
}

#advanced-uploader-modal .uploader-header h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: rgb(15 23 42);
    letter-spacing: -0.02em;
    margin: 0;
}

#advanced-uploader-modal .btn-close {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    border: 1px solid #e2e8f0;
    background: rgb(248 250 252);
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

#advanced-uploader-modal .btn-close:hover {
    background: rgb(226 232 240);
    color: #1e1b4b;
}

#advanced-uploader-modal .uploader-content {
    padding: 1.75rem;
}

#advanced-uploader-modal .step-container h4 {
    font-size: 1.1rem;
    font-weight: 800;
    color: rgb(15 23 42);
}

#advanced-uploader-modal .option-card {
    border: 2px solid #e2e8f0;
    border-radius: 1rem;
    background: #ffffff;
    transition: all 0.2s ease;
}

#advanced-uploader-modal .option-card:hover {
    border-color: #c7d2fe;
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.12);
}

#advanced-uploader-modal .option-card.selected,
#advanced-uploader-modal .option-card.active {
    border-color: #4f46e5;
    background: rgba(79, 70, 229, 0.06);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
}

#advanced-uploader-modal .upload-zone {
    border: 2px dashed rgb(203 213 225);
    border-radius: 1.5rem;
    background: rgba(99, 102, 241, 0.06);
    text-align: center;
    padding: 3rem;
    cursor: pointer;
    transition: all 0.2s;
}

#advanced-uploader-modal .upload-zone:hover {
    border-color: rgb(99 102 241);
    background: rgba(99, 102, 241, 0.12);
}

#advanced-uploader-modal .upload-zone.dragover {
    border-color: rgb(99 102 241);
    background: rgba(99, 102, 241, 0.16);
}

#advanced-uploader-modal .uploader-actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    padding: 1.25rem 1.75rem 1.75rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
    border-bottom-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
}

#advanced-uploader-modal .btn-primary {
    background: #4f46e5;
    color: #ffffff;
    border: none;
    border-radius: 1rem;
    padding: 0.9rem 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

#advanced-uploader-modal .btn-primary:hover {
    background: #0f172a;
}

#advanced-uploader-modal .btn-secondary,
#advanced-uploader-modal .btn-cancel {
    background: #ffffff;
    color: #0f172a;
    border: 2px solid #e2e8f0;
    border-radius: 1rem;
    padding: 0.75rem 1.25rem;
    font-weight: 700;
}

#advanced-uploader-modal .btn-secondary:hover,
#advanced-uploader-modal .btn-cancel:hover {
    border-color: #cbd5f5;
    color: #1e1b4b;
}

#advanced-uploader-modal .btn-control {
    border-radius: 0.75rem;
    border: 2px solid #e2e8f0;
    background: #ffffff;
    color: #0f172a;
    font-weight: 700;
}

#advanced-uploader-modal .btn-control:hover {
    border-color: #c7d2fe;
    color: #1e1b4b;
}

#advanced-uploader-modal .quality-section,
#advanced-uploader-modal .preview-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1rem;
}

/* =============================================================================
   FILE UPLOAD AREA - MATCH REACT DESIGN
   ============================================================================= */
/* File uploader area - match React design exactly */
#advanced-upload-container .advanced-upload-trigger,
.file-upload-area {
    padding: 3rem;
    border: 4px dashed rgb(224 231 255);
    border-radius: 3rem;
    background: rgba(99, 102, 241, 0.05);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    margin: 0;
    width: 100%;
}

#advanced-upload-container .advanced-upload-trigger .enhanced-upload-content,
.file-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

#advanced-upload-container .advanced-upload-trigger:hover,
.file-upload-area:hover {
    border-color: rgb(165 180 252);
    background: rgba(99, 102, 241, 0.1);
}

/* Remove any old spacing/margins */
#advanced-upload-container {
    margin: 0;
    padding: 0;
}

/* Advanced uploader skeleton */
.advanced-upload-skeleton {
    padding: 2.5rem;
    border: 2px dashed rgb(224 231 255);
    border-radius: 2rem;
    background: rgba(99, 102, 241, 0.05);
    text-align: center;
}

.advanced-upload-skeleton .skeleton-header {
    height: 16px;
    width: 60%;
    margin: 0 auto 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(99,102,241,0.12), rgba(99,102,241,0.3), rgba(99,102,241,0.12));
    background-size: 200% 100%;
    animation: printoma-skeleton 1.2s ease-in-out infinite;
}

.advanced-upload-skeleton .skeleton-lines span {
    display: block;
    height: 12px;
    width: 75%;
    margin: 10px auto;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(148,163,184,0.18), rgba(148,163,184,0.35), rgba(148,163,184,0.18));
    background-size: 200% 100%;
    animation: printoma-skeleton 1.2s ease-in-out infinite;
}

.advanced-upload-skeleton .skeleton-lines span:last-child {
    width: 50%;
}

@keyframes printoma-skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

#advanced-upload-container .advanced-upload-trigger {
    margin: 0;
    padding: 3rem;
}

/* Upload icon styling */
#advanced-upload-container .upload-icon,
.file-upload-area .upload-icon,
#advanced-upload-container .enhanced-upload-content .upload-icon {
    width: 5rem;
    height: 5rem;
    background: white;
    border-radius: 1.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: 2.5rem;
    transition: transform 0.2s;
    flex-shrink: 0;
}

#advanced-upload-container .advanced-upload-trigger:hover .upload-icon,
.file-upload-area:hover .upload-icon {
    transform: scale(1.1) rotate(3deg);
}

/* Upload text styling */
#advanced-upload-container .upload-text,
#advanced-upload-container .enhanced-upload-content .upload-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
}

#advanced-upload-container .upload-text strong,
.file-upload-area h4,
#advanced-upload-container .enhanced-upload-content .upload-text strong {
    font-weight: 900;
    color: rgb(15 23 42);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    display: block;
    margin: 0;
}

#advanced-upload-container .upload-text small,
.file-upload-area p,
#advanced-upload-container .enhanced-upload-content .upload-text small {
    font-size: 0.625rem;
    color: rgb(148 163 184);
    margin: 0;
    font-weight: 700;
    line-height: 1.75;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
}

/* Success state spacing + preview */
#advanced-upload-container .advanced-upload-trigger.is-success {
    padding: 2.5rem;
    background: rgb(85 229 70 / 5%) !important;
    background-color: rgb(21 255 3 / 5%) !important;
    border-color: rgb(109 218 149);
    border: 4px dashed rgb(109 218 149);
    border-radius: 3rem;
}

#advanced-upload-container .advanced-upload-trigger.is-success .enhanced-upload-content {
    gap: 1rem;
}

#advanced-upload-container .advanced-upload-trigger.is-success .upload-icon {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 2.25rem;
    border-radius: 1.25rem;
}

#advanced-upload-container .advanced-upload-trigger.is-success .upload-text strong {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
}

#advanced-upload-container .advanced-upload-trigger.is-success .upload-text small {
    font-size: 0.6rem;
}

#advanced-upload-container .advanced-upload-trigger.is-success .upload-thumb {
    width: 72px;
    height: 72px;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
    border: 1px solid rgba(226, 232, 240, 0.9);
}

#advanced-upload-container .advanced-upload-trigger.is-success .upload-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Duplicate removed - modal styles are above */

/* Selection styling */
::selection {
    background-color: #e0e7ff;
    color: #312e81;
}

::-moz-selection {
    background-color: #e0e7ff;
    color: #312e81;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* WordPress admin bar spacing */
.admin-bar .sticky {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .sticky {
        top: 46px;
    }
}

/* Custom animations */
@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-in {
    animation: slideInFromTop 0.3s ease-out;
}

/* FAQ Accordion Styles */
.faq-item {
    transition: all 0.3s ease;
}

.faq-content {
    display: none;
}

.faq-item.open .faq-content {
    display: block;
}

/* =============================================================================
   WOOCOMMERCE DEFAULT STYLES OVERRIDE
   ============================================================================= */

/* Remove WooCommerce default button styles */
.woocommerce button,
.woocommerce .button,
.woocommerce input.button,
.woocommerce a.button {
    border-radius: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s;
}

/* Remove WooCommerce default form styles */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce select {
    border-radius: 0.75rem;
    border: 2px solid rgb(241 245 249);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}

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

/* Remove WooCommerce default table styles */
.woocommerce table {
    border-collapse: separate;
    border-spacing: 0;
}

.woocommerce table th,
.woocommerce table td {
    border: none;
    padding: 1rem;
}

/* Remove WooCommerce default link styles */
.woocommerce a {
    text-decoration: none;
    transition: color 0.2s;
}

.woocommerce a:hover {
    text-decoration: underline;
}

/* Exclude logo and navigation links from underline */
#main-navigation > div > a.group,
#main-navigation a.group:first-child,
nav a.group,
header a.group {
    text-decoration: none !important;
}

#main-navigation > div > a.group:hover,
#main-navigation a.group:first-child:hover,
nav a.group:hover,
header a.group:hover {
    text-decoration: none !important;
}

/* Ensure cart amount is always visible when cart has items */
.cart-amount-display,
.woocommerce-Price-amount.amount {
    display: inline-block !important;
    visibility: visible !important;
}

/* Empty cart button text color */
.return-to-shop .button,
.return-to-shop a,
.wc-backward {
    color: #ffffff !important;
    text-decoration: none !important;
}

.return-to-shop .button:hover,
.return-to-shop a:hover,
.wc-backward:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Cart item product titles – keep neutral, not purple, with subtle hover */
.woocommerce-cart table.cart td.product-name a {
    color: #0f172a;
    font-weight: 500;
}
.woocommerce-cart table.cart td.product-name a:hover {
    color: #4f46e5;
}

/* =============================================================================
   CHECKOUT FORM STYLING - MATCHING REACT DESIGN
   ============================================================================= */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
	width: 100%;
	background: rgb(248 250 252);
	border: 2px solid rgb(226 232 240);
	border-radius: 1rem;
	padding: 1rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: rgb(15 23 42);
	transition: all 0.2s;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

/* Dropdown arrow styling */
.woocommerce-checkout .form-row 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");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 1.25rem;
	padding-right: 3rem;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
	outline: none;
	border-color: rgb(99 102 241);
	background: white;
	box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.woocommerce-checkout .form-row select:focus {
	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='%234f46e5' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
}

/* =============================================================================
   SELECT2 DROPDOWN STYLING (WooCommerce Country/State Selectors)
   ============================================================================= */
.select2-container--default .select2-selection--single {
	height: auto !important;
	min-height: 3rem !important;
	background: rgb(248 250 252) !important;
	border: 2px solid rgb(226 232 240) !important;
	border-radius: 1rem !important;
	padding: 0.5rem 1rem !important;
	display: flex !important;
	align-items: center !important;
	transition: all 0.2s !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: rgb(15 23 42) !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	padding: 0 !important;
	padding-right: 2rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100% !important;
	right: 1rem !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: rgb(107 114 128) transparent transparent transparent !important;
	border-width: 6px 5px 0 5px !important;
	margin-top: -3px !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
	border-color: rgb(99 102 241) !important;
	background: white !important;
	box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1) !important;
}

.select2-container--default.select2-container--focus .select2-selection--single .select2-selection__arrow b,
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	border-color: rgb(79 70 229) transparent transparent transparent !important;
}

/* Checkout breadcrumb colors: Cart muted, Checkout highlighted */
.woocommerce-checkout nav[aria-label="Checkout navigation"] a {
	color: rgb(148 163 184) !important; /* slate-400 */
}

.select2-dropdown {
	border: 2px solid rgb(226 232 240);
	border-radius: 1rem;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	margin-top: 0.5rem;
	overflow: hidden;
}

.select2-results__option {
	padding: 0.75rem 1rem !important;
	font-size: 0.875rem !important;
	color: rgb(15 23 42) !important;
	transition: all 0.2s !important;
}

.select2-results__option--highlighted {
	background: rgb(99 102 241) !important;
	color: white !important;
}

.select2-results__option[aria-selected="true"] {
	background: rgba(99, 102, 241, 0.1) !important;
	color: rgb(99 102 241) !important;
	font-weight: 600 !important;
}

.woocommerce-checkout .form-row label {
	display: block;
	text-transform: uppercase;
	font-size: 0.625rem;
	font-weight: 900;
	letter-spacing: 0.2em;
	color: rgb(148 163 184);
	margin-bottom: 0.75rem;
}

.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select {
	border-color: rgb(220 38 38);
}

.woocommerce-checkout .form-row.woocommerce-invalid label {
	color: rgb(220 38 38);
}

.woocommerce-checkout .form-row .required {
	color: rgb(220 38 38);
}

/* =============================================================================
   CART PAGE STYLING
   ============================================================================= */
.woocommerce-cart .quantity input[type="number"] {
	width: 80px;
	padding: 0.5rem;
	border: 2px solid rgb(241 245 249);
	border-radius: 0.75rem;
	text-align: center;
	font-weight: 700;
}

.woocommerce-cart .quantity input[type="number"]:focus {
	border-color: rgb(99 102 241);
	outline: none;
	box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

/* Mobile cart table improvements */
@media (max-width: 767px) {
	.woocommerce-cart table.cart tbody tr.cart_item td.product-remove {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.woocommerce-cart table.cart tbody tr.cart_item td.product-remove a {
		display: flex;
		align-items: center;
		text-decoration: none;
		color: rgb(148 163 184);
		font-size: 1.5rem;
		transition: all 0.2s;
	}

	.woocommerce-cart table.cart tbody tr.cart_item td.product-remove a:hover {
		color: rgb(239 68 68);
	}

	.woocommerce-cart table.cart tbody tr.cart_item td.product-price {
		display: none;
	}
}

/* =============================================================================
   WOOCOMMERCE PRODUCT PAGE CLEANUP
   ============================================================================= */

/* Hide unwanted WooCommerce elements on single product */
.single-product .woocommerce-product-rating,
.single-product .product_meta,
.single-product .woocommerce-product-details__short-description,
.single-product .woocommerce-product-details__short-description p {
    display: none;
}

/* Hide title and price in summary (we show them custom) */
.single-product .summary .product_title,
.single-product .summary .price {
    display: none;
}

/* Product title spacing */
.single-product h1.product_title,
.single-product .product_title,
.single-product .summary h1 {
    margin-bottom: 1.25rem;
}

/* Hide variation price block (size pricing is shown in swatches) */
.single-product .single_variation .price,
.single-product .woocommerce-variation-price,
.single-product .woocommerce-variation-price .price,
.single-product .woocommerce-Price-amount.amount {
    display: none;
}

/* Hide custom price display block in product header */
.single-product #product-price-display {
    display: none;
}

/* Product page container - constrained width (not full width) */
.single-product #product > div {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.woocommerce div.product {
    max-width: 1280px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Remove wrapper containers that might block interaction */
.single-product #primary,
.single-product #main,
.single-product .content-area {
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

/* =============================================================================
   PRODUCT PAGE LAYOUT FIXES
   ============================================================================= */

/* Remove WooCommerce's default float layout completely */
.woocommerce div.product {
    display: block;
    overflow: visible;
    clear: both;
}

.woocommerce div.product::before,
.woocommerce div.product::after {
    display: none;
    content: none;
}

/* Remove WooCommerce's default summary/image wrapper structure */
.woocommerce div.product > div {
    display: contents;
    float: none;
    width: auto;
    clear: none;
    margin: 0;
    padding: 0;
}

/* Fix product image gallery - make it large and square */
.product-images-column .woocommerce-product-gallery,
.woocommerce div.product .woocommerce-product-gallery {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
    float: none;
    clear: none;
}

.woocommerce div.product .woocommerce-product-gallery__wrapper {
    width: 100%;
}

.woocommerce div.product .woocommerce-product-gallery__image {
    width: 100%;
    float: none;
}

.woocommerce div.product .woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 2.5rem;
    transition: transform 0.25s ease;
}

/* Simple hover zoom (no lens/swap) */
.woocommerce div.product .woocommerce-product-gallery__image:hover img {
    transform: scale(1.05);
}

/* Prevent hover from swapping to another gallery image */
.woocommerce div.product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
    opacity: 1;
}

.woocommerce div.product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:first-child) {
    display: none;
}

/* Mouse pad products in product loop - full width display */
.printoma-mousepad-loop-item .woocommerce-loop-product__link > div {
    background: white !important;
}

.printoma-mousepad-loop-item img {
    object-fit: contain !important;
    padding: 0 !important;
}

/* Technical details - hide desktop version on mobile, hide mobile version on desktop */
.technical-details-section-desktop {
    display: none;
}
@media (min-width: 1024px) {
    .technical-details-section-desktop {
        display: block !important;
    }
}

.technical-details-section-mobile {
    display: block;
}
@media (min-width: 1024px) {
    .technical-details-section-mobile {
        display: none !important;
    }
}

/* Product Sections Styling */
.printoma-product-sections {
    margin-top: 3rem;
}

.printoma-section {
    margin-bottom: 2rem;
}

.printoma-section-content {
    color: #64748b;
    line-height: 1.75;
}

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

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

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

.printoma-section-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.printoma-section-content h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

/* Mouse pad products - full width/height image, no background or borders */
.printoma-mousepad-product .woocommerce-product-gallery {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
}

.printoma-mousepad-product .woocommerce-product-gallery__wrapper {
    width: 100% !important;
    height: auto !important;
}

.printoma-mousepad-product .woocommerce-product-gallery__image {
    width: 100% !important;
}

.printoma-mousepad-product .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
}

.printoma-mousepad-product .product-image-container {
    margin-bottom: 3rem !important;
    padding: 0 !important;
}

.printoma-mousepad-product .product-images-column {
    padding: 0 !important;
}

/* Hide attribute swatches on product listing/archive pages – selection only on single product */
body.archive.woocommerce .cfvsw-swatches-container,
body.post-type-archive-product .cfvsw-swatches-container,
body.tax-product_cat .cfvsw-swatches-container {
    display: none;
}

.prose {
    color: #0f172a;
    font-size: 1rem;
    line-height: 1.7;
}

.prose p {
    margin-bottom: 1.25rem;
}

.prose h2 {
    /* margin-top: 2.5rem; */
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 800;
}

.prose h3 {
    /* margin-top: 2rem; */
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.prose h4 {
    /* margin-top: 1.75rem; */
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.prose ul,
.prose ol {
    margin: 0 0 1.5rem 1.25rem;
    padding-left: 1.25rem;
}

.prose ul {
    list-style: disc;
}

.prose ol {
    list-style: decimal;
}

.prose li {
    margin-bottom: 0.3rem;
}

.prose a {
    color: #4f46e5;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.prose a:hover {
    color: #3730a3;
}

/* Remove list bullet/bubble from MakeCommerce payment method on checkout */
.woocommerce-checkout #payment ul.wc_payment_methods,
.woocommerce-checkout #payment ul.wc_payment_methods li {
    list-style: none;
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

.woocommerce-checkout #payment ul.wc_payment_methods li::before,
.woocommerce-checkout #payment ul.wc_payment_methods li::after {
    content: none;
    display: none;
}

/* Contact form (WPForms ID 16) – Tailwind-style */
#wpforms-form-16 {
    max-width: 100%;
}

#wpforms-form-16 .wpforms-field-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#wpforms-form-16 .wpforms-field {
    margin: 0;
}

#wpforms-form-16 input[type="email"],
#wpforms-form-16 input[type="text"],
#wpforms-form-16 textarea {
    width: 100%;
    padding: 1.25rem 1.5rem;
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    font-size: 0.95rem;
    font-weight: 500;
    color: #0f172a;
    background-color: #ffffff;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

#wpforms-form-16 input[type="email"]::placeholder,
#wpforms-form-16 input[type="text"]::placeholder,
#wpforms-form-16 textarea::placeholder {
    color: #94a3b8;
}

#wpforms-form-16 input[type="email"]:focus,
#wpforms-form-16 input[type="text"]:focus,
#wpforms-form-16 textarea:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
    background-color: #ffffff;
}

#wpforms-form-16 textarea {
    min-height: 160px;
    resize: vertical;
}

#wpforms-form-16 .wpforms-error-noscript {
    color: #b91c1c;
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
}

#wpforms-form-16 .wpforms-field-hp {
    display: none;
}

#wpforms-form-16 .wpforms-submit-container {
    margin-top: 1.5rem;
}

#wpforms-submit-16.wpforms-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.1rem 3rem;
    border-radius: 1rem;
    border: none;
    background-color: #4f46e5;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 18px 45px rgba(79, 70, 229, 0.3);
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

#wpforms-submit-16.wpforms-submit:hover {
    background-color: #0f172a;
    transform: translateY(-1px);
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.35);
}

#wpforms-submit-16.wpforms-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

/* Tailwind-like sale badge styling */
/* Product cards (archive / category) */
.woocommerce ul.products li.product span.onsale {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.9rem;
    border-radius: 9999px;
    background: #4f46e5; /* indigo-600 to match theme */
    color: #ffffff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border: 1px solid rgba(148, 163, 184, 0.35); /* lighter, subtle border */
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
}

/* Single product page: badge over main image, within image container */
.single-product .product-image-container {
    position: relative;
}
.single-product .onsale {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.8rem;
    border-radius: 9999px;
    background: #4f46e5;
    color: #ffffff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.2);
}

/* Remove text underline on product card hover (archive) */
.woocommerce ul.products li.product a {
    text-decoration: none;
}
.woocommerce ul.products li.product a:hover {
    text-decoration: none;
}

/* Make archive product prices bold and slightly larger */
.woocommerce ul.products li.product .price {
    font-weight: 800;
    font-size: 1.05rem;
}

/* Cart: proceed to checkout button – Tailwind-style via custom class */
.cart-checkout-btn {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
    border: 2px solid transparent !important;
    text-decoration: none !important;
}

.cart-checkout-btn:hover {
    background-color: #ffffff !important;
    color: #4f46e5 !important;
    border: 2px solid #4f46e5 !important;
    text-decoration: none !important;
}

/* Cart page: ensure product titles and remove icons use our text colors, not global link purple */
.woocommerce-cart .woocommerce-cart-form a {
    color: inherit !important;
}

/* Responsive product grid on archive/category pages */
.woocommerce ul.products {
    display: grid;
    gap: 2rem 2rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1023px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 639px) {
    .woocommerce ul.products {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Single product layout responsiveness tweaks */
/* Stack image + summary nicely on small screens */
@media (max-width: 1023px) {
    .single-product .product-layout-wrapper {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }
    .single-product .product-images-column,
    .single-product .product-summary-column {
        width: 100%;
        max-width: 100%;
    }
    .single-product .product-summary-column {
        position: static;
        top: auto;
    }
}

/* Prevent unselecting size/orientation swatches: make the selected one not clickable */
.cfvsw-swatches-container[swatches-attr*="dydis"] .cfvsw-selected-swatch,
.cfvsw-swatches-container[swatches-attr*="padetis"] .cfvsw-selected-swatch,
.cfvsw-swatches-container[data-attribute*="pa_dydis"] .cfvsw-selected-swatch,
.cfvsw-swatches-container[data-attribute*="pa_padetis"] .cfvsw-selected-swatch {
    pointer-events: none !important;
}

/* Gallery zoom trigger button (top-right) */
.woocommerce div.product .woocommerce-product-gallery {
    position: relative;
}

.woocommerce div.product .woocommerce-product-gallery__trigger {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.woocommerce div.product .woocommerce-product-gallery__trigger:hover {
    background: #ffffff;
    border-color: #cbd5f5;
}

/* Ensure summary doesn't break layout */
.woocommerce div.product .summary,
.product-summary-column .summary {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    float: none;
    clear: none;
}

/* Force our custom grid layout */
.product-layout-wrapper {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 4rem;
    align-items: start;
    width: 100%;
    max-width: 100%;
}

.product-images-column {
    grid-column: span 7 / span 7;
    width: 100%;
}

.product-summary-column {
    grid-column: span 5 / span 5;
    width: 100%;
}

@media (max-width: 1024px) {
    .product-layout-wrapper {
        grid-template-columns: 1fr;
    }
    
    .product-images-column,
    .product-summary-column {
        grid-column: span 1 / span 1;
    }
}

/* Clean up variation wrapper */
.single_variation_wrap {
    margin-top: 2rem;
}

/* Style swatches with Tailwind-like design */
.cfvsw-swatches-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    width: 100%;
}

@media (min-width: 1024px) {
    .variations_form,
    .variations-wrapper,
    .cfvsw-swatches-container {
        width: 100%;
        max-width: none;
    }

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

/* Swatches - match React template styling on product page */
.cfvsw-swatches-option {
    position: relative !important;
    text-align: left !important;
    min-width: auto !important;
    min-height: auto !important;
    padding: 1.25rem !important;
    border-radius: 1rem !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: rgb(226, 232, 240) !important;
    transition: 0.3s !important;
    background: white !important;
    overflow: visible !important; /* Ensure tooltips aren't clipped */
}

.cfvsw-swatches-option.cfvsw-selected-swatch,
.cfvsw-swatches-option.cfvsw-selected {
    background-color: rgba(79, 70, 229, 0.05) !important;
    box-shadow: rgba(79, 70, 229, 0.1) 0px 0px 0px 4px !important;
    border-color: rgb(79, 70, 229) !important;
}

/* Out of Stock / Disabled Swatches - More Visible */
.cfvsw-swatches-option.out-of-stock,
.cfvsw-swatches-option[data-out-of-stock="true"] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    position: relative !important;
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    text-decoration: line-through !important;
    filter: grayscale(0.7) !important;
}

.cfvsw-swatches-option.out-of-stock::before,
.cfvsw-swatches-option[data-out-of-stock="true"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(220, 38, 38, 0.1) 10px,
        rgba(220, 38, 38, 0.1) 20px
    );
    border-radius: 1rem;
    pointer-events: none;
    z-index: 1;
}

.cfvsw-swatches-option.out-of-stock .cfvsw-swatch-inner,
.cfvsw-swatches-option[data-out-of-stock="true"] .cfvsw-swatch-inner {
    position: relative;
    z-index: 2;
    color: #64748b !important;
}

.cfvsw-swatches-option.out-of-stock:hover,
.cfvsw-swatches-option[data-out-of-stock="true"]:hover {
    transform: none !important;
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}

/* Size + price layout inside swatches (Printoma) */
.printoma-swatch-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.printoma-swatch-price {
    margin-top: 0.35rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #4f46e5;
}

.printoma-swatch-price-current {
    font-weight: 800;
}

.printoma-swatch-price-regular {
    color: #94a3b8;
    text-decoration: line-through;
    font-weight: 600;
}

/* Ensure desktop menu shows */
@media (min-width: 768px) {
    #main-navigation .desktop-menu {
        display: flex;
    }
    
    /* Also target by class pattern */
    #main-navigation > div > div[class*="desktop-menu"] {
        display: flex;
    }
}

/* Hide desktop menu on mobile */
@media (max-width: 767px) {
    #main-navigation .desktop-menu {
        display: none;
    }
}

/* Checkout mobile order - show order summary after customer details but before payment on mobile */
@media (max-width: 1023px) {
    .woocommerce-checkout .grid.lg\:grid-cols-12 {
        display: flex;
        flex-direction: column;
    }
    
    /* Customer details first (order-1) */
    .woocommerce-checkout .order-1 {
        order: 1;
    }
    
    /* Order summary second (order-2) - appears after customer details */
    .woocommerce-checkout .order-2 {
        order: 2;
    }
    
    /* Payment section is already in order-1 column, so it appears after order summary */
}

/* Checkout footer styling */
.woocommerce-checkout .checkout-footer {
    width: 100%;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid rgb(226 232 240); /* border-slate-200 */
}

.woocommerce-checkout .checkout-footer-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Hide place order button from payment section (it's now in footer) */
.woocommerce-checkout-payment .place-order,
.woocommerce-checkout-payment #place_order {
    display: none;
}

/* =============================================================================
   CHECKOUT TERMS AND CONDITIONS STYLING
   ============================================================================= */
/* Terms wrapper */
.woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 0;
}

/* Privacy policy text styling */
.woocommerce-privacy-policy-text {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgb(248 250 252); /* bg-slate-50 */
    border-radius: 1rem;
    border: 1px solid rgb(241 245 249); /* border-slate-100 */
}

.woocommerce-privacy-policy-text p {
    font-size: 0.75rem; /* text-xs */
    color: rgb(100 116 139); /* text-slate-500 */
    line-height: 1.5;
    margin: 0;
}

.woocommerce-privacy-policy-text a,
.woocommerce-privacy-policy-link {
    color: rgb(79 70 229); /* text-indigo-600 */
    text-decoration: underline;
    text-decoration-color: rgb(196 181 253); /* decoration-indigo-200 */
    text-underline-offset: 0.5rem;
    font-weight: 600;
}

.woocommerce-privacy-policy-text a:hover,
.woocommerce-privacy-policy-link:hover {
    color: rgb(67 56 202); /* text-indigo-700 */
}

/* Terms checkbox label styling */
.woocommerce-terms-and-conditions-wrapper .form-row {
    margin: 0;
    padding: 0.5rem; /* p-2 */
}

.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center; /* Center vertically */
    gap: 1.25rem; /* gap-5 */
    cursor: pointer;
    margin: 0;
    padding: 0.5rem; /* p-2 */
    transition: all 0.2s;
}

/* .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox:hover - hover effect handled by child elements */

/* Terms checkbox input styling */
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__input-checkbox {
    width: 2rem; /* w-8 */
    height: 2rem; /* h-8 */
    border-radius: 0.75rem; /* rounded-xl */
    border: 1px solid rgb(226 232 240); /* border-slate-200 */
    accent-color: rgb(79 70 229); /* text-indigo-600 */
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.woocommerce-terms-and-conditions-wrapper .woocommerce-form__input-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2), 0 0 0 4px rgba(79, 70, 229, 0.1); /* focus:ring-indigo-500 */
}

.woocommerce-terms-and-conditions-wrapper .woocommerce-form__input-checkbox:checked {
    background-color: rgb(79 70 229);
    border-color: rgb(79 70 229);
}

/* Terms checkbox text styling */
.woocommerce-terms-and-conditions-checkbox-text {
    font-size: 0.6875rem; /* text-[11px] */
    font-weight: 900; /* font-black */
    color: rgb(100 116 139); /* text-slate-500 */
    text-transform: uppercase;
    letter-spacing: 0.05em; /* tracking-widest */
    line-height: 1.75; /* leading-relaxed */
    margin: 0;
    transition: color 0.2s;
}

.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox:hover .woocommerce-terms-and-conditions-checkbox-text {
    color: rgb(15 23 42); /* group-hover:text-slate-900 */
}

.woocommerce-terms-and-conditions-checkbox-text a,
.woocommerce-terms-and-conditions-link {
    color: rgb(79 70 229); /* text-indigo-600 */
    text-decoration: underline;
    text-decoration-color: rgb(196 181 253); /* decoration-indigo-200 */
    text-underline-offset: 0.5rem; /* underline-offset-8 */
    font-weight: 900;
}

.woocommerce-terms-and-conditions-checkbox-text a:hover,
.woocommerce-terms-and-conditions-link:hover {
    color: rgb(67 56 202); /* text-indigo-700 */
}

/* Required asterisk styling */
.woocommerce-terms-and-conditions-wrapper .required {
    color: rgb(220 38 38); /* text-red-600 */
    font-weight: 900;
    margin-left: 0.25rem;
}

/* Terms content (collapsible) styling */
.woocommerce-terms-and-conditions {
    max-height: 200px;
    overflow: auto;
    margin-top: 1rem;
    padding: 1rem;
    background: rgb(248 250 252); /* bg-slate-50 */
    border-radius: 1rem;
    border: 1px solid rgb(241 245 249); /* border-slate-100 */
    font-size: 0.75rem; /* text-xs */
    line-height: 1.6;
}

.woocommerce-terms-and-conditions ol,
.woocommerce-terms-and-conditions ul {
    margin: 0;
    padding-left: 1.5rem;
}

.woocommerce-terms-and-conditions li {
    margin-bottom: 0.75rem;
    color: rgb(51 65 85); /* text-slate-700 */
}

.woocommerce-terms-and-conditions strong {
    font-weight: 900;
    color: rgb(15 23 42); /* text-slate-900 */
}

/* Hide "Ship to a different address?" checkbox */
.woocommerce-shipping-fields {
    display: none;
}

/* Guard against common overflow culprits without breaking layout containers */
body.woocommerce-checkout table,
body.woocommerce-checkout pre,
body.woocommerce-checkout code,
body.woocommerce-checkout img,
body.woocommerce-checkout svg {
    max-width: 100%;
}

/* Hide default WooCommerce coupon toggle (we use a custom coupon bar) */
body.woocommerce-checkout .woocommerce-form-coupon-toggle {
    display: none;
}

/* Coupon form: keep notices from sitting to the right of the button */
body.woocommerce-checkout #printoma-coupon .coupon-row {
    flex-wrap: wrap;
}

body.woocommerce-checkout #printoma-coupon .woocommerce-notices-wrapper,
body.woocommerce-checkout #printoma-coupon .woocommerce-error,
body.woocommerce-checkout #printoma-coupon .woocommerce-message,
body.woocommerce-checkout #printoma-coupon .woocommerce-info {
    flex: 0 0 100%;
    width: 100%;
    margin-top: 0.75rem;
}

/* Hide mobile menu on desktop */
@media (min-width: 768px) {
    #mobile-menu {
        display: none;
    }
    
    #mobile-menu-toggle {
        display: none;
    }
}

/* Show mobile menu toggle on mobile */
@media (max-width: 767px) {
    #mobile-menu-toggle {
        display: block;
    }
}

.woocommerce-checkout .select2-selection {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.woocommerce-checkout .select2-selection__rendered {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

.woocommerce-checkout .select2-results__option {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ensure form rows with Select2 don't overflow */
.woocommerce-checkout .form-row .select2-container {
    width: 100%; /* Override Select2 inline width */
    max-width: 100%;
}

.woocommerce-checkout .form-row .woocommerce-input-wrapper {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* Fix MakeCommerce parcel selector - ensure full width */
.woocommerce-checkout .makecommerce-shipping-container,
.woocommerce-checkout #makecommerce-shipping-omniva-container,
.woocommerce-checkout #makecommerce-shipping-unisend-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    display: block !important;
    min-width: 0 !important;
}

.woocommerce-checkout .makecommerce-shipping-container .select2-container,
.woocommerce-checkout #makecommerce-shipping-omniva-container .select2-container,
.woocommerce-checkout #makecommerce-shipping-unisend-container .select2-container {
    width: 100% !important; /* Override Select2 inline width */
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.woocommerce-checkout .makecommerce-shipping-container .mcSelectContainer,
.woocommerce-checkout #makecommerce-shipping-omniva-container .mcSelectContainer,
.woocommerce-checkout #makecommerce-shipping-unisend-container .mcSelectContainer {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.woocommerce-checkout .makecommerce-shipping-container > div,
.woocommerce-checkout #makecommerce-shipping-omniva-container > div,
.woocommerce-checkout #makecommerce-shipping-unisend-container > div {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Prevent Select2 dropdown from causing page overflow */
.select2-dropdown {
    position: absolute;
    z-index: 9999;
}

/* Ensure country select field doesn't overflow */
.woocommerce-checkout #billing_country_field,
.woocommerce-checkout #billing_country_field .woocommerce-input-wrapper {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Constrain shipping section and prevent overflow */
.woocommerce-checkout section[aria-labelledby="checkout-forms-heading"],
.woocommerce-checkout section[aria-labelledby="checkout-forms-heading"] > * {
    max-width: 100%;
    box-sizing: border-box;
    /* overflow-x: hidden; */
}

/* Ensure shipping method grid doesn't overflow */
.woocommerce-checkout .grid.grid-cols-1.sm\:grid-cols-2 {
    max-width: 100%;
    /* overflow-x: hidden; */
}

/* Constrain MakeCommerce containers to their parent */
.woocommerce-checkout li.makecommerce-shipping-container {
    max-width: 100%;
    width: auto;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* Constrain checkout form and all children */
.woocommerce-checkout form.checkout,
.woocommerce-checkout form.checkout > * {
    max-width: 100%;
    box-sizing: border-box;
    /* overflow-x: hidden; */
}

/* Ensure grid containers don't overflow */
.woocommerce-checkout .grid.lg\:grid-cols-12 {
    max-width: 100%;
    /* overflow-x: hidden; */
    box-sizing: border-box;
}

/* Constrain all sections within checkout */
.woocommerce-checkout section {
    max-width: 100%;
    /* overflow-x: hidden; */
    box-sizing: border-box;
}

/* Ensure Select2 selection doesn't break layout */
.woocommerce-checkout .select2-selection__rendered {
    max-width: calc(100% - 30px);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ensure Select2 hidden inputs don't fight our visible styles, but remain hidden */
.woocommerce-checkout select.select2-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}

/* Mobile-specific overflow prevention */
@media (max-width: 767px) {
    /* Don't use overflow-x: hidden on html/body - it breaks sticky positioning */
    html, body {
        position: relative;
        width: 100%;
        max-width: 100vw;
    }
    
    /* Apply overflow-x: hidden only to checkout/cart pages on mobile */
    .woocommerce-checkout #page,
    .woocommerce-checkout #content,
    .woocommerce-checkout main,
    .woocommerce-cart #page,
    .woocommerce-cart #content,
    .woocommerce-cart main {
        overflow-x: hidden;
        max-width: 100vw;
        width: 100%;
    }
    
    /* Allow tables to maintain natural width - don't squeeze them */
    table {
        min-width: auto;
        width: auto;
        max-width: 100%;
        display: table;
    }
    
    /* Allow table containers to scroll horizontally if needed */
    .table-container,
    .woocommerce table,
    .woocommerce-cart table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Prevent table from being squeezed */
    .woocommerce table,
    .woocommerce-cart table {
        min-width: 600px;
    }
    
    /* Prevent form containers from overflowing */
    .woocommerce-checkout form.checkout {
        max-width: 100vw;
        /* overflow-x: hidden; */
        box-sizing: border-box;
    }
    
    .woocommerce-checkout .grid,
    .woocommerce-checkout section {
        max-width: 100%;
        /* overflow-x: hidden; */
        box-sizing: border-box;
    }
    
    /* Ensure inputs aren't cut off */
    .woocommerce-checkout input,
    .woocommerce-checkout select,
    .woocommerce-checkout textarea {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Fix MakeCommerce selector on mobile */
    .woocommerce-checkout .makecommerce-shipping-container,
    .woocommerce-checkout #makecommerce-shipping-omniva-container,
    .woocommerce-checkout #makecommerce-shipping-unisend-container {
        max-width: calc(100vw - 2rem);
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
    
    .woocommerce-checkout .makecommerce-shipping-container .select2-container,
    .woocommerce-checkout #makecommerce-shipping-omniva-container .select2-container,
    .woocommerce-checkout #makecommerce-shipping-unisend-container .select2-container {
        max-width: 100%;
        width: 100%;
    }
    
    /* Ensure form rows don't overflow on mobile */
    .woocommerce-checkout .form-row {
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
    
    .woocommerce-checkout .woocommerce-input-wrapper {
        max-width: 100%;
        width: 100%;
    }
    
    /* Ensure main checkout container doesn't overflow */
    .woocommerce-checkout main {
        max-width: 100vw;
        /* overflow-x: hidden; */
        box-sizing: border-box;
    }
    
    /* Ensure inputs after MakeCommerce selector aren't cut off */
    .woocommerce-checkout .makecommerce-shipping-container + *,
    .woocommerce-checkout #makecommerce-shipping-omniva-container + *,
    .woocommerce-checkout #makecommerce-shipping-unisend-container + * {
        margin-top: 1rem;
        max-width: 100%;
    }
    
    /* Ensure all form fields have proper spacing */
    .woocommerce-checkout .form-row {
        margin-bottom: 1.5rem;
    }
}

/* =============================================================================
   MAKECOMMERCE SELECT2 DROPDOWN WIDTH CONSTRAINTS
   ============================================================================= */
/* Ensure MakeCommerce containers are full width */
#makecommerce-shipping-omniva-container,
#makecommerce-shipping-unisend-container,
.makecommerce-shipping-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Ensure any wrapper divs inside MakeCommerce containers are full width */
#makecommerce-shipping-omniva-container > div,
#makecommerce-shipping-unisend-container > div,
.makecommerce-shipping-container > div,
#makecommerce-shipping-omniva-container .mcSelectContainer,
#makecommerce-shipping-unisend-container .mcSelectContainer,
.makecommerce-shipping-container .mcSelectContainer {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* MakeCommerce Select2 containers - full width */
#makecommerce-shipping-omniva-container .select2-container,
#makecommerce-shipping-unisend-container .select2-container,
.makecommerce-shipping-container .select2-container,
#makecommerce-shipping-omniva-container .select2-container--default,
#makecommerce-shipping-unisend-container .select2-container--default,
.makecommerce-shipping-container .select2-container--default,
#makecommerce-shipping-omniva-container .select2-container--open,
#makecommerce-shipping-unisend-container .select2-container--open,
.makecommerce-shipping-container .select2-container--open {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* MakeCommerce Select2 selection - full width */
#makecommerce-shipping-omniva-container .select2-selection,
#makecommerce-shipping-unisend-container .select2-selection,
.makecommerce-shipping-container .select2-selection {
    width: 100%;
    box-sizing: border-box;
}

/* Consolidated MakeCommerce dropdown width constraints */
.select2-dropdown.mcShippingSelectDropdown,
#makecommerce-shipping-omniva-container .select2-dropdown,
#makecommerce-shipping-unisend-container .select2-dropdown,
.makecommerce-shipping-container .select2-dropdown,
.select2-container--open .select2-dropdown.mcShippingSelectDropdown {
    max-width: 100%;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Mobile-specific constraints for MakeCommerce dropdown */
@media (max-width: 767px) {
    /* Constrain dropdown to viewport width on mobile - consolidated selectors */
    .select2-dropdown.mcShippingSelectDropdown,
    #makecommerce-shipping-omniva-container .select2-dropdown,
    #makecommerce-shipping-unisend-container .select2-dropdown,
    .makecommerce-shipping-container .select2-dropdown,
    .select2-container--open .select2-dropdown.mcShippingSelectDropdown {
        max-width: calc(100vw - 2rem);
        width: calc(100vw - 2rem);
        min-width: 0;
        left: 1rem;
        right: 1rem;
        box-sizing: border-box;
    }
    
    /* Constrain Select2 containers on mobile - full width within container */
    #makecommerce-shipping-omniva-container,
    #makecommerce-shipping-unisend-container,
    .makecommerce-shipping-container {
        width: 100%;
        max-width: 100%;
    }
    
    #makecommerce-shipping-omniva-container .select2-container,
    #makecommerce-shipping-unisend-container .select2-container,
    .makecommerce-shipping-container .select2-container {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Truncate long text in dropdown options on mobile */
    .select2-dropdown.mcShippingSelectDropdown .select2-results__option,
    #makecommerce-shipping-omniva-container .select2-dropdown .select2-results__option,
    #makecommerce-shipping-unisend-container .select2-dropdown .select2-results__option,
    .makecommerce-shipping-container .select2-dropdown .select2-results__option {
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
}

/* =============================================================================
   MY ACCOUNT PAGES STYLING
   ============================================================================= */

/* Form fields in My Account pages */
.woocommerce-MyAccount-content .woocommerce-form-row input[type="text"],
.woocommerce-MyAccount-content .woocommerce-form-row input[type="email"],
.woocommerce-MyAccount-content .woocommerce-form-row input[type="password"],
.woocommerce-MyAccount-content .woocommerce-form-row input[type="tel"],
.woocommerce-MyAccount-content .woocommerce-form-row input[type="url"],
.woocommerce-MyAccount-content .woocommerce-form-row textarea,
.woocommerce-MyAccount-content .woocommerce-form-row select {
    width: 100% !important;
    background-color: rgb(248 250 252) !important; /* slate-50 */
    border: 1px solid rgb(226 232 240) !important; /* slate-200 */
    border-radius: 1rem !important; /* rounded-2xl */
    padding: 1rem 1.25rem !important; /* px-5 py-4 */
    font-size: 0.875rem !important; /* text-sm */
    font-weight: 500 !important; /* font-medium */
    transition: all 0.2s !important;
}

.woocommerce-MyAccount-content .woocommerce-form-row input:focus,
.woocommerce-MyAccount-content .woocommerce-form-row textarea:focus,
.woocommerce-MyAccount-content .woocommerce-form-row select:focus {
    outline: none !important;
    border-color: #4f46e5 !important; /* indigo-600 */
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1) !important; /* ring-4 ring-indigo-50 */
}

.woocommerce-MyAccount-content .woocommerce-form-row label {
    display: block !important;
    font-size: 0.625rem !important; /* text-[10px] */
    font-weight: 900 !important; /* font-black */
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important; /* tracking-[0.2em] */
    color: rgb(148 163 184) !important; /* slate-400 */
    margin-bottom: 0.75rem !important; /* mb-3 */
}

.woocommerce-MyAccount-content .woocommerce-form-row .required {
    color: #ef4444 !important; /* red-500 */
}

/* Address fields wrapper */
.woocommerce-address-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.woocommerce-address-fields__field-wrapper .form-row-wide {
    grid-column: 1 / -1;
}

/* Order details table styling */
.woocommerce-order-details table,
.woocommerce-order-details__table {
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-order-details table th,
.woocommerce-order-details__table th {
    padding: 1rem;
    text-align: left;
    font-size: 0.625rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgb(148 163 184);
    border-bottom: 1px solid rgb(226 232 240);
}

.woocommerce-order-details table td,
.woocommerce-order-details__table td {
    padding: 1rem;
    border-bottom: 1px solid rgb(241 245 249);
    color: rgb(71 85 105);
}

.woocommerce-order-details table tr:last-child td,
.woocommerce-order-details__table tr:last-child td {
    border-bottom: none;
}

/* Downloads table */
.woocommerce-MyAccount-downloads table {
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-MyAccount-downloads table th {
    padding: 1rem;
    text-align: left;
    font-size: 0.625rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgb(148 163 184);
    border-bottom: 1px solid rgb(226 232 240);
}

.woocommerce-MyAccount-downloads table td {
    padding: 1rem;
    border-bottom: 1px solid rgb(241 245 249);
    color: rgb(71 85 105);
}

/* Remove list bullets from navigation */
.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Ensure active navigation tab text is white */
.woocommerce-MyAccount-navigation a.bg-indigo-600,
.woocommerce-MyAccount-navigation a[aria-current="page"] {
    color: #ffffff !important;
}

/* Ensure order action button text is white */
.woocommerce-orders-table a.bg-indigo-600,
.woocommerce-orders-table a[class*="bg-indigo-600"],
.woocommerce-orders-table .order-actions a {
    color: #ffffff !important;
}

/* Style order action buttons */
.woocommerce-orders-table .order-actions a {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.5rem !important;
    font-size: 0.75rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
}

.woocommerce-orders-table .order-actions a:hover {
    background-color: #0f172a !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Remove underlines from all buttons and links in My Account */
.woocommerce-MyAccount-content a,
.woocommerce-MyAccount-content button,
.woocommerce-orders-table a,
.woocommerce-pagination a,
.woocommerce-order-details a,
.woocommerce-customer-details a,
.woocommerce-orders-table__cell a,
.woocommerce-MyAccount-navigation a {
    text-decoration: none !important;
}

.woocommerce-MyAccount-content a:hover,
.woocommerce-MyAccount-content button:hover,
.woocommerce-orders-table a:hover,
.woocommerce-pagination a:hover,
.woocommerce-order-details a:hover,
.woocommerce-customer-details a:hover,
.woocommerce-orders-table__cell a:hover,
.woocommerce-MyAccount-navigation a:hover {
    text-decoration: none !important;
}

/* Order details styling */
.woocommerce-order-details {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgb(226 232 240);
}

.woocommerce-order-details__title {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
    color: rgb(15 23 42);
    margin-bottom: 1.5rem;
}

.woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

.woocommerce-table--order-details thead th {
    padding: 1rem;
    text-align: left;
    font-size: 0.625rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgb(148 163 184);
    border-bottom: 2px solid rgb(226 232 240);
    background-color: rgb(248 250 252);
}

.woocommerce-table--order-details tbody td {
    padding: 1.5rem 1rem;
    border-bottom: 1px solid rgb(241 245 249);
    color: rgb(71 85 105);
    vertical-align: top;
}

.woocommerce-table--order-details tbody tr:last-child td {
    border-bottom: none;
}

.woocommerce-table--order-details .product-name {
    font-weight: 600;
    color: rgb(15 23 42);
}

.woocommerce-table--order-details .product-total {
    font-weight: 700;
    color: rgb(15 23 42);
    text-align: right;
}

.woocommerce-table--order-details tfoot th {
    padding: 1rem;
    text-align: right;
    font-weight: 600;
    color: rgb(71 85 105);
    border-top: 2px solid rgb(226 232 240);
    background-color: rgb(248 250 252);
}

.woocommerce-table--order-details tfoot td {
    padding: 1rem;
    text-align: right;
    font-weight: 700;
    color: rgb(15 23 42);
    border-top: 2px solid rgb(226 232 240);
}

.woocommerce-table--order-details tfoot tr.order-total th,
.woocommerce-table--order-details tfoot tr.order-total td {
    font-size: 1.125rem;
    font-weight: 900;
    color: rgb(15 23 42);
    border-top: 3px solid rgb(226 232 240);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* Order item details */
.woocommerce-table--order-details .product-quantity {
    color: rgb(100 116 139);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.woocommerce-table--order-details .product-variation {
    color: rgb(100 116 139);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.woocommerce-table--order-details .product-variation dt,
.woocommerce-table--order-details .product-variation dd {
    display: inline;
    margin: 0;
}

.woocommerce-table--order-details .product-variation dt {
    font-weight: 600;
    margin-right: 0.5rem;
}

/* Customer details section */
.woocommerce-customer-details {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgb(226 232 240);
}

.woocommerce-customer-details h2 {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
    color: rgb(15 23 42);
    margin-bottom: 1.5rem;
}

.woocommerce-customer-details address {
    background-color: rgb(248 250 252);
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid rgb(226 232 240);
    font-style: normal;
    line-height: 1.75;
    color: rgb(71 85 105);
}

.woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-customer-details .woocommerce-customer-details--email {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgb(226 232 240);
}

/* Fix table width issues - prevent horizontal scrolling */
.woocommerce-MyAccount-content {
    overflow-x: hidden;
    max-width: 100%;
}

.woocommerce-orders-table-wrapper,
.woocommerce-order-details-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.woocommerce-orders-table,
.woocommerce-table--order-details {
    width: 100%;
    max-width: 100%;
    table-layout: auto;
}

/* Prevent page from scrolling horizontally */
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .bg-white {
    overflow-x: hidden;
    max-width: 100%;
}

/* Responsive adjustments for My Account */
@media (max-width: 768px) {
    .woocommerce-MyAccount-navigation {
        margin-bottom: 2rem;
    }
    
    .woocommerce-MyAccount-content {
        width: 100%;
        overflow-x: hidden;
    }
    
    .woocommerce-address-fields__field-wrapper {
        grid-template-columns: 1fr;
    }
    
    .woocommerce-table--order-details {
        font-size: 0.875rem;
    }
    
    .woocommerce-table--order-details thead th,
    .woocommerce-table--order-details tbody td,
    .woocommerce-table--order-details tfoot th,
    .woocommerce-table--order-details tfoot td {
        padding: 0.75rem 0.5rem;
    }
    
    /* Orders table responsive - allow horizontal scroll within container */
    .woocommerce-orders-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .woocommerce-orders-table {
        min-width: 600px;
        width: auto;
    }
    
    .woocommerce-orders-table__cell {
        white-space: nowrap;
    }
    
    /* Make order number link smaller on mobile */
    .woocommerce-orders-table__cell-order-number a {
        font-size: 0.75rem;
    }
    
    /* Stack pagination buttons on mobile */
    .woocommerce-pagination {
        flex-direction: column;
    }
    
    .woocommerce-pagination a {
        width: 100%;
    }
    
    /* Order details table responsive */
    .woocommerce-order-details {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .woocommerce-table--order-details {
        min-width: 500px;
    }
}