/**
 * Jersey Ordering System — Frontend Styles
 * Extracted from jersey-ordering-system.php inline <style> blocks.
 */

/* ==========================================================================
   1. DESIGN SYSTEM (Design Tokens + Shared Base Styles)
   ========================================================================== */

/* ── Design Tokens (from Elementor Global Kit) ── */
:root {
    /* Brand Colors */
    --jos-primary: #003572;
    --jos-primary-hover: #004a99;
    --jos-primary-light: #6699CC;
    --jos-primary-subtle: rgba(0,53,114,0.15);
    --jos-primary-gradient: linear-gradient(135deg, #002244 0%, #003572 15%, #4A8AC2 35%, #7AB5E8 50%, #4A8AC2 65%, #003572 85%, #002244 100%);
    /* Legacy aliases — kept for back-compat. Prefer --jos-primary-* in new code. */
    --jos-gold: var(--jos-primary);
    --jos-gold-hover: var(--jos-primary-hover);
    --jos-gold-light: var(--jos-primary-light);
    --jos-gold-subtle: var(--jos-primary-subtle);
    --jos-gold-gradient: var(--jos-primary-gradient);

    /* Text Colors */
    --jos-heading: #101828;
    --jos-text: #444D61;
    --jos-text-muted: #595959;
    --jos-text-faint: #767676;

    /* Backgrounds */
    --jos-bg-white: #FFFFFF;
    --jos-bg-light: #F9FAFB;
    --jos-bg-medium: #EEEEEE;
    --jos-bg-dark: #0A0D0F;

    /* Borders */
    --jos-border: rgba(0,0,0,0.15);
    --jos-border-strong: rgba(0,0,0,0.25);
    --jos-border-light: #eee;

    /* Status Colors */
    --jos-success: #28a745;
    --jos-success-bg: #d4edda;
    --jos-success-text: #155724;
    --jos-success-border: #28a745;
    --jos-warning: #ffc107;
    --jos-warning-bg: #fff3cd;
    --jos-warning-text: #856404;
    --jos-warning-border: #ffc107;
    --jos-danger: #d63638;
    --jos-danger-bg: #fcf0f1;
    --jos-danger-text: #8b0000;

    /* UI */
    --jos-link: #0740F9;
    --jos-link-hover: #0530c0;
    --jos-radius: 0px;
    --jos-radius-sm: 0px;
    --jos-radius-lg: 0px;
    --jos-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --jos-shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --jos-shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --jos-transition: 0.2s ease;

    /* Typography */
    --jos-font-heading: "Teko", sans-serif;
    --jos-font-body: "Inter", sans-serif;
    --jos-font-size-base: 1rem;
    --jos-font-size-sm: 0.875rem;
    --jos-font-size-xs: 0.75rem;
    --jos-font-size-lg: 1.25rem;

    /* Form Controls */
    --jos-input-padding: 10px 14px;
    --jos-input-font-size: 0.9375rem;
    --jos-input-compact-padding: 8px 10px;
    --jos-input-compact-font-size: 0.8125rem;
    --jos-input-bg: #f9fafb;
    --jos-input-border-color: #c0c4c9;
    --jos-input-radius: 0.25rem;
    --jos-btn-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;

    /* Spacing */
    --jos-space-xs: 4px;
    --jos-space-sm: 8px;
    --jos-space-md: 16px;
    --jos-space-lg: 24px;
    --jos-space-xl: 32px;

    /* Container */
    --jos-container: 960px;
}

/* ── Shared Base Styles ── */

/* Buttons — Primary (gold, matches Elementor primary-button) */
.jos-btn-primary,
.jos-btn-next {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 28px;
    min-width: 160px;
    background: linear-gradient(to bottom, #004a99 0%, #003572 100%);
    color: var(--jos-bg-white);
    font-family: var(--jos-font-heading);
    font-size: 16px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    border: 2px solid var(--jos-primary);
    border-radius: var(--jos-radius);
    cursor: pointer;
    transform: skewX(-10deg);
    box-shadow: var(--jos-btn-shadow);
    transition: background var(--jos-transition), box-shadow var(--jos-transition), border-color var(--jos-transition);
    text-decoration: none;
}
.jos-btn-primary > *, .jos-btn-next > * { transform: skewX(10deg); }
.jos-btn-primary span, .jos-btn-next span { transform: skewX(10deg); display: inline-block; }
.jos-btn-primary:hover, .jos-btn-next:hover { background: linear-gradient(to bottom, #0055b3 0%, #004a99 100%); color: var(--jos-bg-white); }
.jos-btn-primary:disabled, .jos-btn-next:disabled { background: #ccc; border-color: #ccc; color: #fff; cursor: not-allowed; transform: skewX(-10deg); box-shadow: none; }

/* Buttons — Primary Gold Gradient (for hero/CTA moments) */
.jos-btn-gold,
.jos-btn-cart,
.jos-btn-approve {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 28px;
    min-width: 160px;
    background: linear-gradient(to bottom, #F3DE8A 0%, #D9BD58 100%);
    color: #101828 !important;
    font-family: var(--jos-font-heading);
    font-size: 16px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    border: 2px solid #BDA854;
    border-radius: var(--jos-radius);
    cursor: pointer;
    transform: skewX(-10deg);
    box-shadow: var(--jos-btn-shadow);
    transition: box-shadow var(--jos-transition), filter var(--jos-transition);
    text-decoration: none !important;
}
.jos-btn-gold > *, .jos-btn-cart > *, .jos-btn-approve > * { transform: skewX(10deg); }
.jos-btn-gold span, .jos-btn-cart span, .jos-btn-approve span { transform: skewX(10deg); display: inline-block; }
.jos-btn-gold:hover, .jos-btn-cart:hover, .jos-btn-approve:hover { box-shadow: var(--jos-shadow-md); filter: brightness(1.05); color: #101828 !important; }
.jos-btn-gold:disabled, .jos-btn-cart:disabled { filter: grayscale(0.5); opacity: 0.6; cursor: not-allowed; box-shadow: none; }

/* Buttons — Secondary (outline, skewed) */
.jos-btn-secondary,
.jos-btn-back,
.jos-btn-changes {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 28px;
    min-width: 160px;
    background: transparent;
    color: var(--jos-heading);
    font-family: var(--jos-font-heading);
    font-size: 16px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    border: 2px solid var(--jos-primary);
    border-radius: var(--jos-radius);
    cursor: pointer;
    transform: skewX(-10deg);
    box-shadow: var(--jos-btn-shadow);
    transition: background var(--jos-transition), color var(--jos-transition), border-color var(--jos-transition), box-shadow var(--jos-transition);
    text-decoration: none;
}
.jos-btn-secondary > *, .jos-btn-back > *, .jos-btn-changes > * { transform: skewX(10deg); }
.jos-btn-secondary span, .jos-btn-back span, .jos-btn-changes span { transform: skewX(10deg); display: inline-block; }
.jos-btn-secondary:hover, .jos-btn-back:hover, .jos-btn-changes:hover { background: var(--jos-primary); border-color: var(--jos-primary); color: #fff; }
.jos-btn-secondary:hover span, .jos-btn-back:hover span, .jos-btn-changes:hover span { color: #fff; }
.jos-btn-secondary:disabled, .jos-btn-back:disabled, .jos-btn-changes:disabled { background: transparent; color: var(--jos-text-muted); border-color: var(--jos-border-strong); cursor: not-allowed; box-shadow: none; }
.jos-btn-secondary:disabled:hover, .jos-btn-back:disabled:hover, .jos-btn-changes:disabled:hover { background: transparent; color: var(--jos-text-muted); border-color: var(--jos-border-strong); }

/* .jos-btn-sm retired — use .jos-btn-pill (with .success / .danger modifiers) for small action items. */

/* Buttons — Text/Link style */
.jos-btn-text {
    background: none; border: none; padding: 0;
    color: var(--jos-primary);
    font-family: var(--jos-font-body);
    font-size: var(--jos-font-size-sm);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: color var(--jos-transition);
}
.jos-btn-text:hover { color: var(--jos-primary-hover); }

/* Form Inputs — base (full-size) */
.jos-input,
.jos-form input[type="text"],
.jos-form input[type="search"],
.jos-form textarea,
.jos-form select {
    width: 100%;
    padding: var(--jos-input-padding);
    border: 1px solid var(--jos-input-border-color);
    border-bottom: 2px solid var(--jos-input-border-color);
    border-radius: var(--jos-input-radius);
    font-family: var(--jos-font-body);
    font-size: var(--jos-input-font-size);
    color: var(--jos-heading);
    background: var(--jos-input-bg);
    box-sizing: border-box;
    transition: border-color var(--jos-transition), box-shadow var(--jos-transition);
}
.jos-input:focus-visible,
.jos-form input[type="text"]:focus-visible,
.jos-form input[type="search"]:focus-visible,
.jos-form textarea:focus-visible,
.jos-form select:focus-visible {
    outline: 2px solid var(--jos-primary);
    outline-offset: 2px;
    border-color: var(--jos-primary);
    box-shadow: 0 0 0 2px var(--jos-primary-subtle);
}

/* Form Inputs — compact (inside tables) */
.jos-input-compact,
.jos-table input,
.jos-table select,
.jos-table textarea {
    padding: var(--jos-input-compact-padding);
    border: 1px solid var(--jos-input-border-color);
    border-bottom: 2px solid var(--jos-input-border-color);
    border-radius: var(--jos-input-radius);
    font-family: var(--jos-font-body);
    font-size: var(--jos-input-compact-font-size);
    color: var(--jos-heading);
    background: var(--jos-input-bg);
    box-sizing: border-box;
    transition: border-color var(--jos-transition), box-shadow var(--jos-transition);
}
.jos-table select option, .jos-table select optgroup { font-size: var(--jos-input-compact-font-size); }
.jos-input-compact:focus-visible,
.jos-table input:focus-visible,
.jos-table select:focus-visible,
.jos-table textarea:focus-visible {
    outline: 2px solid var(--jos-primary);
    outline-offset: 2px;
    border-color: var(--jos-primary);
    box-shadow: 0 0 0 2px var(--jos-primary-subtle);
}


/* Cards */
.jos-card {
    background: var(--jos-bg-white);
    border: 1px solid var(--jos-border);
    border-radius: var(--jos-radius-lg);
    padding: var(--jos-space-lg);
}

/* Headings */
.jos-h2 {
    font-family: var(--jos-font-heading);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--jos-heading);
    font-size: 28px;
    line-height: 1;
    margin: 0 0 var(--jos-space-md);
}
.jos-h3 {
    font-family: var(--jos-font-heading);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--jos-heading);
    font-size: 22px;
    line-height: 1;
    margin: var(--jos-space-lg) 0 var(--jos-space-sm);
}
.jos-h4 {
    font-family: var(--jos-font-heading);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--jos-heading);
    font-size: 18px;
    line-height: 1;
    margin: 0 0 var(--jos-space-sm);
}

/* Status Badges */
.jos-badge {
    display: inline-block;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--jos-radius-sm);
    letter-spacing: 0.3px;
    line-height: 1.6;
}
.jos-badge.active { background: var(--jos-success-bg); color: var(--jos-success-text); border: 1px solid var(--jos-success-border); }
.jos-badge.pending, .jos-badge.warning { background: var(--jos-warning-bg); color: var(--jos-warning-text); border: 1px solid var(--jos-warning-border); }
.jos-badge.ready { background: var(--jos-success-bg); color: var(--jos-success-text); border: 1px solid var(--jos-success-border); }
.jos-badge.danger { background: var(--jos-danger-bg); color: var(--jos-danger-text); border: 1px solid var(--jos-danger); }

/* ============================================================
   UNIFIED TABLE SYSTEM
   Shared base for .jos-table, .jos-matrix, .jos-roster-table.
   Visual style inherited from the Step 3 Size Matrix: compact
   uppercase muted th, light-grid cells with right+bottom borders,
   row hover highlight, consistent 13px font.
   .jos-cart-edit-table mirrors the same rules via !important
   (see below) because it lives inside Elementor-styled modals.
   ============================================================ */
.jos-table,
.jos-matrix,
.jos-roster-table { width: 100%; border-collapse: collapse; table-layout: auto; font-size: 13px; margin: 0; }
.jos-table th, .jos-matrix th, .jos-roster-table th { border: none !important; box-shadow: none !important; }
.jos-table td, .jos-matrix td, .jos-roster-table td { border: none; border-bottom: 1px solid var(--jos-border-light); border-right: 1px solid var(--jos-border-light); }
.jos-table td:last-child, .jos-matrix td:last-child, .jos-roster-table td:last-child { border-right: none; }
.jos-table th,
.jos-matrix th,
.jos-roster-table th {
    padding: 10px 12px !important; /* !important to beat Elementor's WooCommerce My Account widget padding-top reset */
    text-align: left !important; vertical-align: middle;
    font-size: var(--jos-font-size-xs); font-weight: 600;
    text-transform: uppercase; color: #fff;
    letter-spacing: 0.3px; white-space: nowrap; line-height: 1;
    background: var(--jos-primary);
    font-family: var(--jos-font-body);
}
.jos-table th:first-child,
.jos-matrix th:first-child,
.jos-roster-table th:first-child { padding-left: var(--jos-space-md); }
.jos-table th:last-child,
.jos-matrix th:last-child,
.jos-roster-table th:last-child { padding-right: var(--jos-space-md); }
.jos-table td,
.jos-matrix td,
.jos-roster-table td { padding: 8px 12px; vertical-align: middle; }
.jos-table td:first-child,
.jos-matrix td:first-child,
.jos-roster-table td:first-child { padding-left: var(--jos-space-md); }
.jos-table td:last-child,
.jos-matrix td:last-child,
.jos-roster-table td:last-child { padding-right: var(--jos-space-md); }
.jos-table tbody tr:last-child td,
.jos-matrix tbody tr:last-child td,
.jos-roster-table tbody tr:last-child td { border-bottom: none; }
.jos-table tr:hover td,
.jos-matrix tr:hover td,
.jos-roster-table tr:hover td { background: var(--jos-bg-light); }
/* Inputs inside any unified table */
.jos-table td select, .jos-table td input[type="text"],
.jos-matrix td select, .jos-matrix td input[type="text"],
.jos-roster-table td select, .jos-roster-table td input[type="text"] {
    width: 100%; padding: var(--jos-input-compact-padding); font-size: var(--jos-input-compact-font-size);
    line-height: 1.2; height: 34px;
    border: 1px solid var(--jos-input-border-color);
    border-bottom: 2px solid var(--jos-input-border-color);
    border-radius: var(--jos-input-radius);
    font-family: var(--jos-font-body); background: var(--jos-input-bg);
    color: var(--jos-heading); box-sizing: border-box;
    transition: border-color var(--jos-transition), box-shadow var(--jos-transition);
}
.jos-table td select option, .jos-table td select optgroup,
.jos-matrix td select option, .jos-matrix td select optgroup,
.jos-roster-table td select option, .jos-roster-table td select optgroup { font-size: var(--jos-input-compact-font-size); }
.jos-table td select:focus-visible, .jos-table td input[type="text"]:focus-visible,
.jos-matrix td select:focus-visible, .jos-matrix td input[type="text"]:focus-visible,
.jos-roster-table td select:focus-visible, .jos-roster-table td input[type="text"]:focus-visible {
    outline: 2px solid var(--jos-primary); outline-offset: 2px;
    border-color: var(--jos-primary); box-shadow: 0 0 0 2px var(--jos-primary-subtle);
}

/* Remove button (x) */
.jos-remove-btn {
    background: none !important; border: none !important;
    border-radius: 0 !important;
    color: var(--jos-danger);
    cursor: pointer; font-size: 16px;
    min-width: 24px; min-height: 24px;
    padding: 4px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: opacity var(--jos-transition);
}
.jos-remove-btn:hover { opacity: 0.7; }

/* Error / Success Messages */
.jos-error-text { color: var(--jos-danger); font-size: var(--jos-font-size-sm); }
.jos-success-text { color: var(--jos-success); font-size: var(--jos-font-size-sm); }
.jos-muted-text { color: var(--jos-text-muted); font-size: var(--jos-font-size-xs); }

/* Alert Boxes */
.jos-alert {
    padding: 14px var(--jos-space-md);
    border-radius: var(--jos-radius);
    margin-bottom: var(--jos-space-md);
    font-size: var(--jos-font-size-sm);
}
.jos-alert.success { background: var(--jos-success-bg); border: 1px solid var(--jos-success-border); color: var(--jos-success-text); }
.jos-alert.warning { background: var(--jos-warning-bg); border: 1px solid var(--jos-warning-border); color: var(--jos-warning-text); }
.jos-alert.danger { background: var(--jos-danger-bg); border: 1px solid var(--jos-danger); color: var(--jos-danger-text); }

/* Lightbox */
.jos-lightbox-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.jos-lightbox-overlay img { max-width: 90%; max-height: 90%; object-fit: contain; }

/* ── Shared Modal System ── */
/* ============================================================
   UNIFIED MODAL SYSTEM
   Base styles shared across .jos-modal, .jos-cart-modal, .jos-product-modal
   Variant-specific overrides (widths, close btn, column widths, etc.) live
   near their original blocks below.
   ============================================================ */
.jos-modal-overlay,
.jos-cart-modal-overlay,
.jos-product-modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 100000;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
    align-items: center; justify-content: center;
    padding: var(--jos-space-md);
}
.jos-modal-overlay.active,
.jos-cart-modal-overlay.active,
.jos-product-modal-overlay.active,
.jos-cart-modal-overlay[style*="flex"] { display: flex; }
@keyframes josModalSlideIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes josModalFadeIn { from { opacity: 0; } to { opacity: 1; } }
.jos-modal,
.jos-cart-modal,
.jos-product-modal {
    background: #fff; border-radius: var(--jos-radius-lg);
    width: 100%; max-width: 480px; max-height: 90vh;
    display: flex; flex-direction: column;
    box-shadow: var(--jos-shadow-lg);
    border: 1px solid var(--jos-border-light);
    animation: josModalSlideIn 0.25s ease-out;
}
.jos-modal.wide { max-width: 900px; }
.jos-modal-header,
.jos-cart-modal-header,
.jos-product-modal-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: var(--jos-space-md) var(--jos-space-lg);
    border-bottom: 1px solid var(--jos-border-light);
    flex-shrink: 0;
}
.jos-modal-body,
.jos-cart-modal-body,
.jos-product-modal-body {
    padding: var(--jos-space-md) var(--jos-space-lg);
    overflow-y: auto; flex: 1 1 auto;
}
.jos-modal-body label {
    display: block; font-weight: 600; margin-bottom: 8px;
    font-size: 14px; color: var(--jos-heading); font-family: var(--jos-font-body);
}
.jos-modal-body textarea {
    width: 100%; min-height: 100px; padding: var(--jos-input-padding);
    border: 1px solid var(--jos-input-border-color);
    border-bottom: 2px solid var(--jos-input-border-color);
    border-radius: var(--jos-input-radius);
    font-size: var(--jos-input-font-size); font-family: var(--jos-font-body);
    color: var(--jos-heading); background: var(--jos-input-bg);
    box-sizing: border-box; resize: vertical;
    transition: border-color var(--jos-transition), box-shadow var(--jos-transition);
}
.jos-modal-body textarea:focus-visible { outline: 2px solid var(--jos-primary); outline-offset: 2px; border-color: var(--jos-primary); box-shadow: 0 0 0 2px var(--jos-primary-subtle); }
.jos-modal-footer,
.jos-cart-modal-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--jos-space-sm) var(--jos-space-lg);
    border-top: 1px solid var(--jos-border-light);
    background: var(--jos-bg-light); border-radius: 0 0 var(--jos-radius-lg) var(--jos-radius-lg);
    flex-shrink: 0; gap: var(--jos-space-sm);
}
.jos-modal-footer-btns,
.jos-cart-modal-footer-btns { display: flex; gap: var(--jos-space-sm); align-items: center; }

/* Cart modal — scrollable table + stacked buttons on mobile */
.jos-cart-modal .jos-cart-modal-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
    .jos-cart-modal .jos-cart-edit-table {
        min-width: 520px;
        table-layout: auto !important;
    }
}
.jos-cart-modal .jos-cart-modal-footer {
    flex-wrap: wrap;
    gap: 0;
}
.jos-cart-modal .jos-cart-modal-footer > span:empty {
    display: none;
}
.jos-cart-modal .jos-cart-modal-footer-btns {
    flex-direction: column-reverse;
    flex: 1 1 100%;
    width: 100%;
    gap: var(--jos-space-sm);
}
.jos-cart-modal .jos-cart-modal-footer-btns button {
    width: 100%;
    padding: 14px 28px !important;
    font-size: 16px !important;
}

/* Revision modal buttons — stacked, equal height, Submit first */
/* Shared modal footer treatment on mobile — wrap, stack the button group
   below the status, and lay buttons out as full-width column-reverse so the
   primary action sits on top. Used by all modals that share the
   .jos-modal-footer / .jos-modal-footer-btns structure (revision modal,
   pending designs "Request Changes" modal, CSV upload modal, etc.). */
.jos-modal-footer {
    flex-wrap: wrap;
    gap: 0;
    justify-content: stretch;
}
#jos-revision-modal .jos-modal-footer .jos-revision-status:empty,
.jos-modal-footer .jos-modal-status:empty {
    display: none;
}
.jos-modal-footer-btns {
    flex-direction: column-reverse;
    flex: 1 1 100%;
    width: 100%;
    gap: var(--jos-space-sm);
}
.jos-modal-footer-btns button {
    width: 100%;
    padding: 14px 28px !important;
    font-size: 16px !important;
}
.jos-modal-footer .jos-modal-status { font-size: var(--jos-font-size-xs); }
/* Shared modal cancel — diagonal outline. Applies to all three modal systems. */
.jos-modal-footer .jos-btn-secondary,
.jos-cart-modal-footer .jos-btn-secondary,
.jos-btn-back,
.jos-btn-changes {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 28px;
    background: transparent; color: var(--jos-primary) !important;
    border: 2px solid var(--jos-primary) !important; border-radius: var(--jos-radius);
    font-family: var(--jos-font-heading); font-size: 16px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    cursor: pointer; transform: skewX(-10deg);
    transition: background var(--jos-transition), color var(--jos-transition);
}
.jos-modal-footer .jos-btn-secondary span, .jos-btn-back span, .jos-btn-changes span,
.jos-modal-footer .jos-btn-secondary span, .jos-cart-modal-footer .jos-btn-secondary span { transform: skewX(10deg); display: inline-block; font-family: var(--jos-font-heading) !important; color: var(--jos-primary) !important; }
.jos-modal-footer .jos-btn-secondary:hover, .jos-btn-back:hover, .jos-btn-changes:hover,
.jos-modal-footer .jos-btn-secondary:hover, .jos-cart-modal-footer .jos-btn-secondary:hover { background: var(--jos-primary) !important; color: #fff !important; border-color: var(--jos-primary) !important; }
.jos-modal-footer .jos-btn-secondary:hover span, .jos-cart-modal-footer .jos-btn-secondary:hover span, .jos-btn-back:hover span, .jos-btn-changes:hover span { color: #fff !important; }
.jos-cart-modal-footer .jos-btn-primary span, .jos-btn-next span,
.jos-modal-footer .jos-btn-primary span, .jos-btn-next span { color: #fff !important; font-family: var(--jos-font-heading) !important; }
/* Modal body scroll lock */
body.jos-modal-open { overflow: hidden; }
.jos-size-chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--jos-space-lg); }
@media (max-width: 600px) { .jos-size-chart-grid { grid-template-columns: 1fr; } }

/* Responsive utilities */
@media (max-width: 1024px) {
    :root { --jos-font-size-base: 15px; }
}
@media (max-width: 768px) {
    :root {
        --jos-font-size-base: 14px;
        --jos-space-lg: 16px;
        --jos-space-xl: 24px;
    }
    .jos-btn-primary, .jos-btn-secondary, .jos-btn-gold,
.jos-btn-cart,
.jos-btn-approve {
        padding: 10px 20px;
        font-size: 15px;
    }
    .jos-h2 { font-size: 24px; }
    .jos-h3 { font-size: 18px; }
}


/* ==========================================================================
   2. QUOTE FORM
   ========================================================================== */

/* Force form.cart to stack vertically so quote fields sit above the button */
form.cart:has(.jos-quote-form) {
    display: flex !important;
    flex-direction: column !important;
}
.jos-quote-form {
    margin-top: 12px; margin-bottom: var(--jos-space-lg); width: 100%;
    font-family: var(--jos-font-body);
    color: var(--jos-text);
}
@media (max-width: 768px) {
    .jos-quote-form { margin-top: 0; }
}
.jos-quote-form label {
    display: block; font-family: var(--jos-font-body); font-weight: 600;
    font-size: var(--jos-font-size-sm); color: var(--jos-heading); margin-bottom: 6px;
}
.jos-quote-form abbr.required {
    text-decoration: none; border: none;
}
.jos-quote-form input[type="text"],
.jos-quote-form textarea,
.jos-quote-form select {
    width: 100%; padding: var(--jos-input-padding);
    border: 1px solid var(--jos-input-border-color);
    border-bottom: 2px solid var(--jos-input-border-color);
    border-radius: var(--jos-input-radius); font-family: var(--jos-font-body);
    font-size: var(--jos-input-font-size); box-sizing: border-box; background: var(--jos-input-bg);
    color: var(--jos-heading); transition: border-color var(--jos-transition), box-shadow var(--jos-transition);
}
.jos-quote-form input[type="text"]:focus-visible,
.jos-quote-form textarea:focus-visible,
.jos-quote-form select:focus-visible {
    outline: 2px solid var(--jos-primary); outline-offset: 2px; border-color: var(--jos-primary);
    box-shadow: 0 0 0 2px var(--jos-primary-subtle);
}
.jos-quote-form textarea { min-height: 100px; resize: vertical; }
.jos-quote-form select.jos-placeholder { color: var(--jos-text-muted); }
.jos-quote-form select.jos-placeholder option { color: var(--jos-heading); }
.jos-quote-form select.jos-placeholder option[value=""] { color: var(--jos-text-muted); }

/* Design card inputs/selects use compact sizing */
.jos-design-card input[type="text"],
.jos-design-card textarea,
.jos-design-card select {
    padding: var(--jos-input-compact-padding);
    font-size: var(--jos-input-compact-font-size);
}
.jos-design-card select option,
.jos-design-card select optgroup {
    font-size: var(--jos-input-compact-font-size);
    color: var(--jos-heading);
}

/* Category filter tabs */
.jos-category-tabs { display: flex !important; flex-wrap: wrap; gap: 6px; margin-bottom: var(--jos-space-md); }
button.jos-cat-tab {
    padding: 5px 12px !important; border: 1px solid var(--jos-border) !important; border-radius: 999px !important;
    background: var(--jos-bg-white) !important; font-size: 12px !important; cursor: pointer;
    font-family: var(--jos-font-body) !important; color: var(--jos-text) !important; font-weight: 500;
    transition: border-color var(--jos-transition), background var(--jos-transition), color var(--jos-transition);
    line-height: 1.4; width: auto !important; min-width: 0 !important; text-transform: none !important;
    letter-spacing: 0 !important; margin: 0 !important; flex-basis: auto !important; display: inline-block !important;
}
button.jos-cat-tab:hover { border-color: var(--jos-primary) !important; color: var(--jos-heading) !important; background: var(--jos-bg-white) !important; }
button.jos-cat-tab.active { background: var(--jos-heading) !important; color: #fff !important; border-color: var(--jos-heading) !important; }

.jos-design-card {
    border: 1px solid var(--jos-border); padding: var(--jos-space-lg); margin-bottom: var(--jos-space-md);
    background: rgba(128, 128, 128, 0.07); position: relative;
}
.jos-design-card-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(0,0,0,0.08);
}
.jos-design-card-header h4 {
    margin: 0; font-family: var(--jos-font-heading); font-size: 22px;
    font-weight: 700; text-transform: uppercase; color: var(--jos-heading);
    line-height: 1em;
}
.cart button.jos-design-remove,
.cart .button.jos-design-remove,
.jos-design-remove {
    background: none !important; border: none !important;
    border-radius: 0 !important;
    color: var(--jos-danger) !important; padding: 0 !important;
    margin: 0 !important; margin-inline-start: 0 !important; margin-block-start: 0 !important;
    cursor: pointer; font-family: var(--jos-font-body) !important;
    font-size: 13px !important; font-weight: 500 !important;
    text-transform: none !important; letter-spacing: 0 !important;
    line-height: normal !important;
    width: auto !important; min-width: 0 !important;
    flex: none !important; flex-basis: auto !important;
    transition: opacity var(--jos-transition);
}
.jos-design-remove:hover { opacity: 0.7; }
.jos-field-group { margin-bottom: var(--jos-space-lg); }
.jos-field-group small { display: block; margin-top: 4px; font-size: 12px; color: var(--jos-text-muted); line-height: 1.4; }
.jos-upload-area {
    display: block;
    border: 2px dashed var(--jos-border-strong); padding: var(--jos-space-lg);
    text-align: center; cursor: pointer;
    transition: border-color var(--jos-transition), background var(--jos-transition);
    background: var(--jos-bg-white); font-size: var(--jos-font-size-sm); color: var(--jos-text);
}
.jos-upload-area:hover { border-color: var(--jos-primary); background: rgba(0,53,114,0.05); }
.jos-upload-previews { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.jos-upload-preview { position: relative; display: inline-block; }
.jos-upload-preview img {
    width: 80px; height: 80px; object-fit: cover; border: 1px solid var(--jos-border);
}
.jos-upload-preview-remove {
    position: absolute !important; top: -8px !important; right: -8px !important;
    background: var(--jos-danger) !important; color: #fff !important;
    border: none !important; border-radius: 50% !important;
    width: 24px !important; height: 24px !important; min-width: 0 !important;
    cursor: pointer; font-size: 14px !important; line-height: 22px !important;
    padding: 0 !important; text-transform: none !important; letter-spacing: 0 !important;
    font-weight: 400 !important; font-family: inherit !important;
    box-shadow: none !important; transform: none !important;
}
.cart button.jos-add-design,
.cart .button.jos-add-design,
.jos-add-design {
    display: inline-block !important;
    padding: 8px 18px !important;
    background: rgba(0,0,0,0.05) !important; color: var(--jos-heading) !important;
    border: 1px solid var(--jos-border-light) !important; border-radius: 999px !important;
    font-family: var(--jos-font-body) !important; font-size: 13px !important; font-weight: 600 !important;
    text-transform: none !important; letter-spacing: normal !important;
    line-height: normal !important;
    cursor: pointer; width: auto !important; text-align: center !important;
    margin-inline-start: 0 !important; margin-block-start: 0 !important;
    margin-top: var(--jos-space-sm) !important;
    transition: background var(--jos-transition), color var(--jos-transition);
}
.jos-add-design:hover { background: var(--jos-primary) !important; color: #fff !important; border-color: var(--jos-primary) !important; }
.jos-upload-status { font-size: var(--jos-font-size-xs); color: var(--jos-text); margin-top: var(--jos-space-xs); }
.jos-upload-error { color: var(--jos-danger); }
.jos-form-error { color: var(--jos-danger); font-size: 13px; margin-top: var(--jos-space-xs); }

@keyframes josModalFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Product preview — clickable */
.jos-product-preview-inner {
    display: flex; gap: 12px; align-items: stretch; padding: 10px;
    background: #fff; border: 1px solid #eee; border-radius: var(--jos-radius-sm);
    cursor: pointer; transition: border-color var(--jos-transition), box-shadow var(--jos-transition);
}
.jos-product-preview-inner:hover { border-color: var(--jos-primary); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.jos-preview-img {
    width: 120px; min-height: 80px; object-fit: cover; border-radius: var(--jos-radius-sm); flex-shrink: 0;
    aspect-ratio: 1080 / 763;
}
.jos-preview-details { display: flex; flex-direction: column; justify-content: center; }
.jos-preview-name { font-weight: 600; font-size: 14px; color: #101828; }
.jos-preview-price { font-size: 13px; color: #888; margin-top: 2px; }
.jos-product-preview .jos-preview-hint {
    font-size: 11px; color: var(--jos-text-muted); margin-top: 2px;
}

/* Product detail modal */
/* Product preview modal — inherits base from unified modal system above.
   Only product-specific overrides remain here. */
.jos-product-modal { max-width: 700px; width: 90%; overflow: hidden; }
.jos-product-modal-overlay { display: flex; animation: josModalFadeIn 0.2s ease-out; }
.jos-product-modal-header { align-items: center; padding: 16px 20px; }
.jos-product-modal-header h3 {
    margin: 0; font-family: var(--jos-font-heading); font-size: 22px;
    font-weight: 700; text-transform: uppercase; color: var(--jos-heading); line-height: 1.1;
}
.jos-product-modal-close {
    background: none; border: none; font-size: 22px; cursor: pointer;
    color: var(--jos-text-muted); padding: 0; line-height: 1;
}
.jos-product-modal-close:hover { color: var(--jos-heading); }
.jos-product-modal-body { padding: 20px; }
.jos-product-modal-body img {
    width: 100%; max-height: 450px; object-fit: contain; border-radius: var(--jos-radius);
    background: var(--jos-bg-light); margin-bottom: 16px;
}
.jos-product-modal-body .jos-pm-price {
    font-size: 18px; font-weight: 700; color: var(--jos-heading); margin-bottom: 8px;
}
.jos-product-modal-body .jos-pm-desc {
    font-size: 14px; color: var(--jos-text); line-height: 1.6;
}
.jos-product-modal-footer {
    display: block; padding: 12px 20px; text-align: right; background: transparent;
    border-top: 1px solid var(--jos-border-light);
}
.jos-product-modal-footer a {
    font-size: 13px; color: var(--jos-primary); text-decoration: none; font-weight: 600;
}
.jos-product-modal-footer a:hover { text-decoration: underline; }


/* ==========================================================================
   3. CART PAGE & EDIT MODAL
   ========================================================================== */

/* ── Cart table — override Elementor defaults ── */
.woocommerce-cart-form .shop_table { font-family: var(--jos-font-body) !important; }
.woocommerce-cart-form .shop_table td { padding: 12px 16px !important; vertical-align: middle !important; }
.woocommerce-cart-form .shop_table th { font-family: var(--jos-font-body) !important; }
.woocommerce-cart-form .product-thumbnail { min-width: 120px !important; }
.woocommerce-cart-form .product-thumbnail img { width: 100px !important; height: auto !important; border-radius: var(--jos-radius) !important; }
.woocommerce-cart-form .product-remove a {
    font-size: 20px !important; color: var(--jos-text-muted) !important;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; min-height: 24px;
    transition: color var(--jos-transition);
}
.woocommerce-cart-form .product-remove a:hover { color: var(--jos-danger) !important; }
.woocommerce-cart-form .product-name a { font-family: var(--jos-font-body) !important; font-weight: 600 !important; color: var(--jos-heading) !important; text-decoration: none !important; }
.woocommerce-cart-form .product-name a:hover { color: var(--jos-primary) !important; }
.woocommerce-cart-form .product-price,
.woocommerce-cart-form .product-subtotal { font-family: var(--jos-font-body) !important; font-weight: 600 !important; color: var(--jos-heading) !important; }
.woocommerce-cart-form .product-quantity .quantity { font-family: var(--jos-font-body) !important; }

/* Reorder cart item name cell so edit link appears after Team/Players info */
td.product-name { display: flex; flex-direction: column; }
td.product-name .jos-cart-edit-link { order: 99; }
td.product-name .jos-cart-modal-overlay { order: 100; }

/* Cart item meta (Team, Players, surcharge) — compact inline style */
td.product-name dl.variation {
    margin: 6px 0 0 !important; padding: 0 !important;
    display: flex !important; flex-wrap: wrap !important; gap: 0 !important;
    align-items: baseline !important;
    font-size: 13px !important; line-height: 1.6 !important;
}
td.product-name dl.variation dt {
    float: none !important;
    font-weight: 600 !important; color: var(--jos-heading) !important;
    margin: 0 !important; padding: 0 !important;
    font-size: 13px !important; text-transform: none !important;
}
td.product-name dl.variation dd {
    float: none !important;
    margin: 0 8px 0 3px !important; padding: 0 !important;
    color: var(--jos-heading) !important; font-weight: 400 !important;
    font-size: 13px !important;
}
td.product-name dl.variation dd:last-of-type { margin-right: 0 !important; }
td.product-name dl.variation dd p { margin: 0 !important; font-size: 13px !important; }
td.product-name dl.variation dd .woocommerce-Price-amount,
td.product-name dl.variation dd .woocommerce-Price-currencySymbol {
    font-size: 13px !important;
}

/* Surcharge note */
.jos-surcharge-note {
    display: block; font-size: 12px; color: var(--jos-text-muted);
    margin-top: 2px; font-style: italic;
}

/* Back link */
.jos-cart-back-link {
    font-family: var(--jos-font-body) !important;
    font-size: var(--jos-font-size-sm) !important;
}
.jos-cart-back-link a {
    color: var(--jos-primary) !important; font-family: var(--jos-font-body) !important;
    text-decoration: none; font-weight: 600;
    transition: color var(--jos-transition);
}
.jos-cart-back-link a:hover { color: var(--jos-primary-hover) !important; }

/* Edit link */
.jos-cart-edit-link { margin-top: 8px; }
.jos-cart-edit-link a,
.jos-cart-edit-link .jos-btn-text {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 600; color: var(--jos-primary);
    text-decoration: none; font-family: var(--jos-font-body);
    transition: color var(--jos-transition);
}
.jos-cart-edit-link a:hover,
.jos-cart-edit-link .jos-btn-text:hover { color: var(--jos-primary-hover); }

/* Block cart: white pill button for "Edit Players & Sizes" */
.jos-block-cart-edit-btn {
    display: inline-block; padding: 6px 14px;
    background: var(--jos-bg-white); color: var(--jos-heading);
    border: 1px solid var(--jos-border-light);
    border-radius: 999px; cursor: pointer;
    font-family: var(--e-global-typography-925ac09-font-family), Sans-serif;
    font-weight: 600; font-size: 13px; text-transform: none; letter-spacing: normal;
    box-shadow: var(--jos-btn-shadow);
    transition: background var(--jos-transition), color var(--jos-transition), box-shadow var(--jos-transition);
}
.jos-block-cart-edit-btn:hover { background: var(--jos-primary); color: #fff; border-color: var(--jos-primary); }

/* Block cart: edit button + trash icon on one line */
.jos-block-cart-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.jos-block-cart-remove-btn { background: none; border: none; padding: 0; margin-top: 2px; color: var(--jos-text-muted, #999); cursor: pointer; transition: color var(--jos-transition); line-height: 0; }
.jos-block-cart-remove-btn:hover { color: var(--jos-error, #c00); }
.jos-block-cart-remove-btn svg { fill: currentColor; }

/* Cart edit modal overlay */
/* Cart modal — inherits base from unified modal system above.
   Only cart-specific overrides remain here. */
.jos-cart-modal { max-width: 700px; }
.jos-cart-modal-overlay { z-index: 100001; }

/* Cart modal body: table flush to edges, no top gap */
.jos-cart-modal .jos-cart-modal-body { padding-top: 0; }
.jos-cart-modal .jos-cart-modal .jos-cart-edit-table { margin-left: calc(-1 * var(--jos-space-lg)) !important; margin-right: calc(-1 * var(--jos-space-lg)) !important; width: calc(100% + 2 * var(--jos-space-lg)) !important; }

/* "+ Add Player Manually" — white pill button in cart modal */
.jos-cart-modal-body .jos-btn-text {
    display: inline-block; padding: 6px 14px;
    background: var(--jos-bg-white); color: var(--jos-heading);
    border: 1px solid var(--jos-border-light);
    border-radius: 999px; cursor: pointer;
    font-family: var(--e-global-typography-925ac09-font-family), Sans-serif;
    font-weight: 600; font-size: 13px; text-transform: none; letter-spacing: normal;
    box-shadow: var(--jos-btn-shadow);
    transition: background var(--jos-transition), color var(--jos-transition), box-shadow var(--jos-transition);
}
.jos-cart-modal-body .jos-btn-text:hover { background: var(--jos-primary); color: #fff !important; border-color: var(--jos-primary); }

/* Cart edit table — matches unified matrix style. !important used to override Elementor theming inside modals. */
.jos-cart-edit-table { width: 100% !important; border-collapse: collapse !important; table-layout: fixed !important; font-size: 13px !important; margin: 0 !important; }
.jos-cart-edit-table thead tr { display: table-row !important; }
.jos-cart-edit-table th { border: none !important; }
.jos-cart-edit-table td { border: none !important; border-bottom: 1px solid var(--jos-border-light) !important; border-right: 1px solid var(--jos-border-light) !important; }
.jos-cart-edit-table td:last-child { border-right: none !important; }
.jos-cart-edit-table th {
    padding: 10px 12px !important; text-align: left !important; vertical-align: middle !important;
    font-size: var(--jos-font-size-xs) !important; font-weight: 600 !important;
    text-transform: uppercase !important; color: #fff !important;
    letter-spacing: 0.3px !important; white-space: nowrap !important; line-height: 1 !important;
    background: var(--jos-primary) !important;
    font-family: var(--jos-font-body) !important;
}
.jos-cart-edit-table th:first-child { padding-left: var(--jos-space-md) !important; text-align: left !important; }
.jos-cart-edit-table th:last-child { padding-right: var(--jos-space-md) !important; }
.jos-cart-edit-table td { padding: 8px 12px !important; vertical-align: middle !important; }
.jos-cart-edit-table td:first-child { padding-left: var(--jos-space-md) !important; }
.jos-cart-edit-table td:last-child { padding-right: var(--jos-space-md) !important; }
.jos-cart-edit-table tbody tr:last-child td { border-bottom: none !important; }
.jos-cart-edit-table tr:hover td { background: var(--jos-bg-light) !important; }
.jos-cart-edit-table input,
.jos-cart-edit-table select {
    width: 100% !important; padding: var(--jos-input-compact-padding) !important;
    border: 1px solid var(--jos-input-border-color) !important;
    border-bottom: 2px solid var(--jos-input-border-color) !important;
    border-radius: var(--jos-input-radius) !important;
    font-family: var(--jos-font-body) !important;
    font-size: var(--jos-input-compact-font-size) !important;
    line-height: 1.2 !important; height: 34px !important;
    color: var(--jos-heading) !important;
    background-color: var(--jos-input-bg) !important;
    box-sizing: border-box !important;
    transition: border-color var(--jos-transition), box-shadow var(--jos-transition);
}
.jos-cart-edit-table input:focus-visible,
.jos-cart-edit-table select:focus-visible {
    outline: 2px solid var(--jos-primary) !important; outline-offset: 2px;
    border-color: var(--jos-primary) !important;
    box-shadow: 0 0 0 2px var(--jos-primary-subtle) !important;
}
.jos-cart-edit-table .jos-remove-btn { border-radius: 0 !important; }

/* Player rows in cart edit */
.jos-cart-player-row .jos-ce-number { width: 100%; text-align: center; }
.jos-cart-player-row .jos-ce-jersey { width: 100%; }
.jos-cart-player-row .jos-ce-size { width: 100%; }

/* Column widths (shared by .jos-cart-edit-table, .jos-roster-table, and .jos-matrix so all editable player tables render identically) */
.jos-cart-edit-table .jos-col-idx,
.jos-roster-table .jos-col-idx,
.jos-matrix .jos-col-idx { width: 36px; text-align: left; color: var(--jos-text-muted); font-size: var(--jos-font-size-xs); }
.jos-cart-edit-table .jos-col-jersey,
.jos-roster-table .jos-col-jersey,
.jos-matrix .jos-col-jersey { /* fills remaining width */ }
.jos-cart-edit-table .jos-col-number,
.jos-roster-table .jos-col-number,
.jos-matrix .jos-col-number { width: 80px; text-align: center; }
.jos-cart-edit-table .jos-col-number input,
.jos-roster-table .jos-col-number input,
.jos-matrix .jos-col-number input { text-align: center; }
.jos-cart-edit-table .jos-col-size,
.jos-roster-table .jos-col-size,
.jos-matrix .jos-col-size { width: 240px; }
.jos-cart-edit-table .jos-col-size select,
.jos-roster-table .jos-col-size select,
.jos-matrix .jos-col-size select { width: 100%; }
.jos-cart-edit-table .jos-col-remove,
.jos-roster-table .jos-col-remove,
.jos-matrix .jos-col-remove { width: 40px; text-align: center; padding-left: 4px !important; padding-right: 4px !important; }

/* Cart modal footer buttons now inherit from unified .jos-modal-footer styles above. */

/* Cart modal add-player select — override Elementor */
.jos-cart-modal-body > div > select.jos-input {
    padding: var(--jos-input-padding) !important;
    border: 1px solid var(--jos-input-border-color) !important;
    border-bottom: 2px solid var(--jos-input-border-color) !important;
    border-radius: var(--jos-input-radius) !important;
    font-family: var(--jos-font-body) !important;
    font-size: var(--jos-input-font-size) !important;
    color: var(--jos-heading) !important;
    background: var(--jos-input-bg) !important;
    box-sizing: border-box !important;
    height: auto !important;
}

/* Responsive cart modal */
@media (max-width: 600px) {
    .jos-cart-modal { max-width: 100%; border-radius: var(--jos-radius-lg) 12px 0 0; margin-top: auto; }
    .jos-cart-modal-body { padding: var(--jos-space-sm); }
    .jos-cart-modal .jos-table th { font-size: 10px; padding: 6px 4px; }
    .jos-cart-modal .jos-table td { padding: 6px 4px; }
    .jos-cart-modal .jos-table input,
    .jos-cart-modal .jos-table select { padding: 6px; font-size: 12px; }
    /* Hide hint label on tiny screens (input is still clear from context) */
}


/* ==========================================================================
   4. ORDER WIZARD
   ========================================================================== */

/* ── Order Wizard ── */
/* Ensure shortcode widget fills Elementor flex container */
.elementor-widget:has(.jos-wizard) { width: 100%; }
.jos-wizard { font-family: var(--jos-font-body); color: var(--jos-text); width: 100%; }
.jos-wizard h2 { font-family: var(--jos-font-heading); font-weight: 700; text-transform: uppercase; color: var(--jos-heading); font-size: 28px; line-height: 1; margin: 0 0 var(--jos-space-md); }
.jos-wizard h3 { font-family: var(--jos-font-heading); font-weight: 700; text-transform: uppercase; color: var(--jos-heading); font-size: 22px; line-height: 1; margin: var(--jos-space-lg) 0 10px; }

/* Step layout */
.jw-step1-layout { display: grid; grid-template-columns: min(320px, 35%) 1fr; gap: 0; align-items: stretch; }
.jw-step1-left {
    background: var(--jos-bg-white); border: 1px solid var(--jos-border-light);
    border-right: none; padding: var(--jos-space-lg);
}
.jw-step1-left .jos-field-group { margin-bottom: var(--jos-space-lg); }
.jw-step1-left label { font-family: var(--jos-font-heading); font-weight: 600; font-size: 15px; text-transform: uppercase; letter-spacing: 0.3px; display: block; margin-bottom: 6px; color: var(--jos-heading); }
.jw-step1-right {
    border: 1px solid var(--jos-border-light); padding: 0;
    background: var(--jos-bg-white); min-height: 240px;
    display: flex; flex-direction: column;
}
.jw-players-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px var(--jos-space-md);
    background: var(--jos-bg-light); border-bottom: 1px solid var(--jos-border-light);
    font-family: var(--jos-font-heading); font-weight: 600; font-size: 15px;
    text-transform: uppercase; letter-spacing: 0.3px; color: var(--jos-heading);
}

/* Empty state */
.jw-empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 1; text-align: center; color: var(--jos-text-faint); padding: var(--jos-space-lg);
}
.jw-empty-state-icon { font-size: 48px; margin-bottom: var(--jos-space-sm); opacity: 0.35; }
.jw-empty-state p { margin: 0; font-size: var(--jos-font-size-sm); line-height: 1.5; }

/* Inputs — full-size (dropdowns, text fields outside tables) */
.jos-wizard select, .jos-wizard input[type="text"] {
    padding: var(--jos-input-padding);
    border: 1px solid var(--jos-input-border-color);
    border-bottom: 2px solid var(--jos-input-border-color);
    border-radius: var(--jos-input-radius);
    font-family: var(--jos-font-body); font-size: var(--jos-input-font-size);
    background: var(--jos-input-bg); color: var(--jos-heading); box-sizing: border-box;
    transition: border-color var(--jos-transition), box-shadow var(--jos-transition);
}
.jos-wizard select:focus-visible, .jos-wizard input:focus-visible {
    outline: 2px solid var(--jos-primary); outline-offset: 2px; border-color: var(--jos-primary); box-shadow: 0 0 0 2px var(--jos-primary-subtle);
}

/* Steps */
.jos-wizard-step { display: none; background-color: var(--e-global-color-7f2f6f0, #EEEEEE); padding: 40px; border: 1px solid var(--jos-border-light); }
.jos-wizard-step.active { display: block; }

/* Navigation buttons */
.jos-wizard-nav { display: flex; gap: 10px; margin-top: var(--jos-space-lg); }
.jos-wizard-nav button {
    padding: 14px 28px; font-family: var(--jos-font-heading); font-size: 16px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    cursor: pointer; border-radius: var(--jos-radius);
    transform: skewX(-10deg); min-width: 160px;
    transition: background var(--jos-transition), box-shadow var(--jos-transition);
}
.jos-wizard-nav button span { display: inline-block; transform: skewX(10deg); }
/* .jos-btn-next, .jos-btn-cart, .jos-btn-back — aliases of .jos-btn-primary / .jos-btn-gold / .jos-btn-secondary (see top of file). */

/* Wizard utility buttons — subtle style (non-skewed) */
.jos-wizard .jos-btn-text {
    display: inline-block; padding: 6px 14px;
    background: rgba(0,0,0,0.05); color: var(--jos-heading) !important;
    border: 1px solid var(--jos-border-light) !important; border-radius: 999px;
    font-family: var(--e-global-typography-925ac09-font-family), Sans-serif;
    font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: normal;
    cursor: pointer; transition: background var(--jos-transition), color var(--jos-transition);
}
.jos-wizard .jos-btn-text:hover { background: var(--jos-primary); color: #fff !important; border-color: var(--jos-primary) !important; }

/* Step indicator */
.jos-step-indicator { display: flex; gap: 0; margin-bottom: 0; }
.jos-step-dot {
    flex: 1; padding: 16px 10px; text-align: center;
    font-family: var(--jos-font-heading); font-size: 15px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    background: var(--jos-bg-light); color: #6B6B6B;
    border-bottom: 3px solid var(--jos-border);
    transition: all var(--jos-transition);
}
.jos-step-dot.active { background: var(--jos-bg-white); color: var(--jos-heading); border-bottom-color: var(--jos-primary); }
.jos-step-dot.done { background: rgba(0,53,114,0.06); color: var(--jos-primary); border-bottom-color: var(--jos-primary); }

/* Player checkboxes */
.jos-player-select { margin: 0; flex: 1; overflow-y: auto; }
.jos-player-select label {
    display: flex; align-items: center; gap: 10px;
    padding: 10px var(--jos-space-md); cursor: pointer; font-size: var(--jos-font-size-sm);
    border-bottom: 1px solid var(--jos-border-light);
    transition: background var(--jos-transition);
}
.jos-player-select label:last-child { border-bottom: none; }
.jos-player-select label:hover { background: var(--jos-bg-light); }
.jos-player-select label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--jos-primary); flex-shrink: 0; }
.jos-select-actions { font-size: 13px; display: flex; gap: 8px; }
.jos-select-actions a {
    display: inline-block; padding: 6px 14px;
    background: var(--jos-bg-white); color: var(--jos-heading);
    border: 1px solid var(--jos-border-light);
    border-radius: 999px; cursor: pointer; text-decoration: none;
    font-family: var(--e-global-typography-925ac09-font-family), Sans-serif;
    font-weight: 600; font-size: 13px; text-transform: none; letter-spacing: normal;
    box-shadow: var(--jos-btn-shadow);
    transition: background var(--jos-transition), color var(--jos-transition), box-shadow var(--jos-transition);
}
.jos-select-actions a:hover { background: var(--jos-primary); color: #fff !important; border-color: var(--jos-primary); }

/* Shared panel card pattern */
.jw-panel {
    background: var(--jos-bg-white); border: 1px solid var(--jos-border-light);
    overflow: hidden;
}
.jw-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px var(--jos-space-md);
    background: var(--jos-bg-light); border-bottom: 1px solid var(--jos-border-light);
    font-family: var(--jos-font-heading); font-weight: 600; font-size: 15px;
    text-transform: uppercase; letter-spacing: 0.3px; color: var(--jos-heading);
}
.jw-panel-header .jos-muted-text { font-family: var(--jos-font-body); font-size: var(--jos-font-size-xs); text-transform: none; letter-spacing: 0; font-weight: 400; }
.jw-panel-header-actions { display: flex; align-items: center; gap: 8px; }
.jw-panel-header-actions #jw-toggle-size-chart { margin-left: 24px; position: relative; background: none !important; border: none !important; padding: 6px 4px !important; color: var(--jos-primary) !important; display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; text-underline-offset: 3px; }
.jw-panel-header-actions #jw-toggle-size-chart:hover { background: none !important; color: var(--jos-primary-hover) !important; }
.jw-panel-header-actions #jw-toggle-size-chart svg { flex-shrink: 0; }
.jw-panel-header-actions #jw-toggle-size-chart::before { content: ''; position: absolute; left: -13px; top: 15%; bottom: 15%; width: 1px; background: var(--jos-border-light); }
.jw-panel-header-actions select { font-size: var(--jos-input-compact-font-size); padding: 6px 14px; padding-right: 34px; text-transform: none; font-family: var(--jos-font-body); font-weight: 400; letter-spacing: 0; border: 1px solid var(--jos-input-border-color); border-bottom: 2px solid var(--jos-input-border-color); border-radius: 999px; background-color: var(--jos-input-bg); color: var(--jos-heading); line-height: 1.4; min-width: 140px; }
.jw-panel-header-actions select option, .jw-panel-header-actions select optgroup { font-size: var(--jos-input-compact-font-size); }
.jw-panel-body { padding: var(--jos-space-md); }

/* Size matrix */
.jw-panel .jw-matrix-scroll { overflow-x: auto; }
/* Matrix-specific: table-layout fixed + column helpers. Base styling inherited from unified table system above. */
.jos-matrix { table-layout: fixed; }

/* Row-index column — muted row tracker for disambiguation */
.jos-col-idx,
th.jos-col-idx,
td.jos-col-idx,
.jos-matrix td.jos-col-idx,
.jos-matrix th.jos-col-idx,
.jos-cart-edit-table td.jos-col-idx,
.jos-cart-edit-table th.jos-col-idx,
.jos-roster-table td.jos-col-idx,
.jos-roster-table th.jos-col-idx {
    width: 32px !important;
    min-width: 32px;
    text-align: center !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    color: var(--jos-text-muted, #888);
    font-size: 12px;
    font-weight: 500;
    vertical-align: middle;
}
thead th.jos-col-idx { background: var(--jos-primary); }
.jos-matrix th.jos-col-check { width: 36px; min-width: 36px; padding-left: 8px; padding-right: 8px; }
.jos-matrix td.jos-col-check { width: 36px; min-width: 36px; padding-left: 8px; padding-right: 8px; text-align: left; }
.jos-matrix .jos-col-check input[type="checkbox"] { margin: 0; cursor: pointer; }
.jos-matrix .jos-col-number { min-width: 60px; }
.jos-matrix .jos-col-jersey { min-width: 140px; }
.jos-matrix .product-header { width: 240px; min-width: 200px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Single-product matrix: stretch size column but cap the select so it doesn't look goofy large */
.jos-matrix--single .product-header { width: 500px; }
.jos-matrix--single .jw-size-select { max-width: 300px; display: inline-block; }

/* Cap text inputs in tables so they don't stretch goofy large on wide screens (Name on Jersey, etc.) */
.jos-matrix td input[type="text"],
.jos-cart-edit-table td input[type="text"] { max-width: 400px; }

/* Order summary */
.jos-order-summary { background: var(--jos-bg-white); border: 1px solid var(--jos-border-light); }
.jos-order-summary-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px var(--jos-space-md);
    background: var(--jos-bg-light); border-bottom: 1px solid var(--jos-border-light);
    font-family: var(--jos-font-heading); font-weight: 600; font-size: 15px;
    text-transform: uppercase; letter-spacing: 0.3px; color: var(--jos-heading);
}
.jos-order-summary-body { padding: var(--jos-space-md); }
.jos-summary-product {
    padding: var(--jos-space-md) 0;
    border-bottom: 1px solid var(--jos-border-light);
}
.jos-summary-product:last-of-type { border-bottom: none; }
.jos-summary-line { display: flex; justify-content: space-between; padding: 2px 0; font-size: var(--jos-font-size-sm); }
.jos-summary-line.product-line { font-weight: 600; font-size: 15px; color: var(--jos-heading); margin-bottom: 4px; }
.jos-summary-line.surcharge-line { font-size: 12px; color: var(--jos-text-muted); padding-left: 0; }
.jos-summary-player-list { margin: 6px 0 0; }
.jos-summary-player {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0; font-size: 13px; color: var(--jos-text);
}
.jos-summary-player-num { color: var(--jos-text-faint); font-size: 12px; min-width: 18px; }
.jos-summary-total {
    display: flex; justify-content: space-between;
    font-weight: 700; font-size: 18px; color: var(--jos-heading);
    border-top: 2px solid var(--jos-heading); margin-top: var(--jos-space-md);
    padding-top: var(--jos-space-md);
    font-family: var(--jos-font-heading); text-transform: uppercase;
}

/* Status messages */
.jos-wizard-error { color: var(--jos-danger); font-size: 13px; margin-top: var(--jos-space-sm); display: none; }
.jos-wizard-loading { color: var(--jos-text-muted); font-size: 13px; }

/* Skeleton loaders — shown while team data fetches so the wait feels structured rather than stalled */
.jos-skeleton {
    background: linear-gradient(90deg, #eaeaea 25%, #f6f6f6 50%, #eaeaea 75%);
    background-size: 200% 100%;
    animation: jos-skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 4px;
    display: inline-block;
}
@keyframes jos-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.jos-skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--jos-border-light);
}
.jos-skeleton-row:last-child { border-bottom: none; }
.jos-skeleton-checkbox { width: 16px; height: 16px; flex-shrink: 0; border-radius: 3px; }
.jos-skeleton-bar { height: 14px; }
.jos-skeleton-bar--name { flex: 1; max-width: 200px; }
.jos-skeleton-bar--num { width: 40px; }

/* Product grid */
.jw-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.jw-product-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--jos-border); border-radius: var(--jos-radius-lg);
    overflow: hidden; cursor: pointer; background: var(--jos-bg-white); padding: 10px;
    transition: border-color var(--jos-transition), box-shadow var(--jos-transition);
    position: relative;
}
.jw-product-card:hover { border-color: var(--jos-primary); box-shadow: var(--jos-shadow-sm); }
.jw-product-card.selected { border-color: var(--jos-primary); box-shadow: 0 0 0 2px var(--jos-primary-subtle); }
.jw-product-cb-wrap { position: absolute; top: 0; right: 0; padding: 10px; background: #fff; z-index: 2; border-radius: 0 0 0 var(--jos-radius); }
.jw-product-cb-wrap input[type="checkbox"] { display: block; width: 18px; height: 18px; accent-color: var(--jos-primary); margin: 0; cursor: pointer; }
.jw-product-card-img { width: 100%; aspect-ratio: 1080 / 763; overflow: hidden; background: var(--jos-bg-light); position: relative; }
.jw-product-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jw-product-no-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 13px; }
.jw-product-card-info { padding: 10px 12px; text-align: center; }
.jw-product-card-name { display: block; font-family: var(--jos-font-heading); font-size: 16px; font-weight: 600; text-transform: uppercase; color: var(--jos-heading); line-height: 1.2; }
.jw-product-card-price { display: block; font-size: 13px; color: var(--jos-text-muted); font-weight: 600; margin-top: 2px; }

/* Products under revision */
.jw-product-in-revision { opacity: 0.55; cursor: not-allowed; border-color: var(--jos-border) !important; }
.jw-product-in-revision:hover { border-color: var(--jos-border) !important; box-shadow: none; }
.jw-product-in-revision .jw-product-cb-wrap { display: none; }
.jw-revision-badge {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: var(--jos-warning); color: var(--jos-heading);
    font-family: var(--jos-font-heading);
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    text-align: center; padding: 4px 8px; letter-spacing: 0.5px;
}

/* Responsive */
@media (max-width: 1024px) {
    .jw-step1-layout { grid-template-columns: min(280px, 40%) 1fr; }
}
@media (max-width: 768px) {
    .jos-wizard-step { padding: var(--jos-space-md); padding-bottom: 32px; }
    .jw-product-grid { grid-template-columns: repeat(3, 1fr); }
    .jw-step1-layout { grid-template-columns: 1fr; }
    .jw-step1-left, .jw-step1-right { min-width: 0; max-width: 100%; }
    .jw-step1-left { overflow: hidden; }
    .jw-step1-left { border-right: 1px solid var(--jos-border-light); border-bottom: none; }
    .jos-wizard h2 { font-size: 24px; }
    .jos-wizard h2 { text-align: center; padding-top: 8px; }
    .jos-wizard h3 { font-size: 18px; }

    .jos-wizard-nav { flex-wrap: wrap; }
    .jos-wizard-nav button { flex: 1; min-width: 120px; }
    /* Unified table mobile styles */
    .jos-table, .jos-matrix, .jos-roster-table { font-size: 12px; }
    .jos-matrix { table-layout: auto; }
    .jos-table th, .jos-matrix th, .jos-roster-table th { padding: 8px 10px; font-size: 10px; }
    .jos-table th:first-child, .jos-matrix th:first-child, .jos-roster-table th:first-child { padding-left: 12px; }
    .jos-table td, .jos-matrix td, .jos-roster-table td { padding: 8px 10px; }
    .jos-table td:first-child, .jos-matrix td:first-child, .jos-roster-table td:first-child { padding-left: 12px; }
    .jos-table td select, .jos-table td input[type="text"],
    .jos-matrix td select, .jos-matrix td input[type="text"],
    .jos-roster-table td select, .jos-roster-table td input[type="text"] { font-size: 11px; padding: 6px; }
    .jos-matrix .jos-col-number { width: auto; min-width: 60px; }
    .jos-matrix .jos-col-jersey { width: auto; min-width: 100px; }
    .jw-matrix-scroll { -webkit-overflow-scrolling: touch; }
}
@media (max-width: 600px) {
    .jw-product-grid { grid-template-columns: 1fr; gap: 10px; }
    .jw-product-card-name { font-size: 16px; }
    .jw-product-card-info { padding: 10px; }
    .jos-wizard-step[data-step="2"] .jw-panel-header { display: none; }

    /* Step 3 panel header — 3-row layout: header, divider line, actions */
    .jos-wizard-step[data-step="3"] .jw-panel-header {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto 1px auto;
        column-gap: 8px;
        row-gap: 10px;
        padding: 12px;
        align-items: center;
    }
    .jos-wizard-step[data-step="3"] .jw-panel-header::after {
        content: '';
        grid-column: 1 / -1;
        grid-row: 2;
        height: 1px;
        background: var(--jos-border);
    }
    .jos-wizard-step[data-step="3"] .jw-panel-header > span {
        grid-column: 1;
        grid-row: 1;
    }
    .jos-wizard-step[data-step="3"] .jw-panel-header-actions {
        display: contents;
    }
    .jos-wizard-step[data-step="3"] #jw-toggle-size-chart {
        grid-column: 2;
        grid-row: 1;
        margin-left: 0;
    }
    /* Hide the vertical divider pseudo-element on mobile */
    .jos-wizard-step[data-step="3"] #jw-toggle-size-chart::before {
        display: none;
    }
    /* Horizontal line between header row and action row */
    .jos-wizard-step[data-step="3"] #jw-set-all-size {
        grid-column: 1;
        grid-row: 3;
        width: 100%;
    }
    .jos-wizard-step[data-step="3"] #jw-set-all-btn {
        grid-column: 2;
        grid-row: 3;
        white-space: nowrap;
    }

    .jos-matrix th:first-child,
    .jos-matrix td:first-child { width: 32px; padding-left: 8px !important; padding-right: 8px !important; }
}
@media (max-width: 480px) {
    .jos-wizard-nav { flex-direction: column-reverse; }
    .jos-wizard-nav button { width: 100%; min-width: 0; }
}


/* ==========================================================================
   5. MY TEAMS DASHBOARD
   ========================================================================== */

/* ── My Teams Dashboard ── */
.jos-team-card {
    margin-bottom: var(--jos-space-lg);
}
.jos-team-section {
    border: 1px solid var(--jos-border);
    padding: var(--jos-space-lg);
    border-radius: var(--jos-radius-lg);
    background: rgba(128, 128, 128, 0.07);
    margin-bottom: var(--jos-space-md);
}
.jos-team-section h4:first-child,
.jos-team-section > h4:first-of-type { margin-top: 0; }
.jos-team-card h3 {
    margin-top: 0; margin-bottom: var(--jos-space-md); font-family: var(--jos-font-heading) !important;
    font-weight: 700; text-transform: uppercase; color: var(--jos-heading);
    font-size: 32px !important; line-height: 1;
}

/* Section headings */
.jos-team-card h4 {
    margin: 60px 0 var(--jos-space-sm); font-family: var(--jos-font-heading) !important;
    font-weight: 700; text-transform: uppercase; color: var(--jos-heading);
    font-size: 18px; line-height: 1; letter-spacing: 0.3px;
    padding-bottom: var(--jos-space-sm); border-bottom: 2px solid var(--jos-border-light);
}
.jos-team-card h4:first-of-type { margin-top: 0; }

/* Team header — title and team code on the same line on desktop */
.jos-team-header {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--jos-space-md); margin-bottom: var(--jos-space-md);
}
.jos-team-header h3 { margin: 0 !important; }
.jos-team-header .jos-team-info { margin: 0; padding: 0; background: none; }

/* Team info strip */
.jos-team-info {
    display: flex; flex-wrap: wrap; gap: var(--jos-space-md);
    align-items: center; margin-bottom: var(--jos-space-md);
    padding: 10px 14px; background: var(--jos-bg-light);
    border-radius: var(--jos-radius); font-size: 13px;
    color: var(--jos-text); font-family: var(--jos-font-body);
}
.jos-team-info-item { display: flex; align-items: center; gap: 6px; }
.jos-team-info-item strong { color: var(--jos-heading); font-weight: 600; }
.jos-team-info-item .jos-badge {
    display: inline-block; padding: 2px 8px; border-radius: var(--jos-radius-sm);
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
}
.jos-badge.available { background: var(--jos-success-bg); color: var(--jos-success-text); border: 1px solid var(--jos-success-border); }
.jos-badge.used { background: var(--jos-bg-light); color: var(--jos-text-muted); border: 1px solid var(--jos-border); }
.jos-team-code {
    font-family: var(--jos-font-mono, monospace); font-size: 12px;
    background: var(--jos-bg-white); padding: 2px 8px; border-radius: var(--jos-radius-sm);
    border: 1px solid var(--jos-border-light); color: var(--jos-text-muted);
    letter-spacing: 0.3px;
}

/* Full-width gold buttons, no skew — rounded corners */
.jos-order-cta { margin-top: 60px; gap: 8px; width: 100%; justify-content: center; transform: none; border-radius: 100px; background: linear-gradient(135deg, #9B7A20 0%, #C6A530 15%, #F0E098 35%, #FAF0C8 50%, #F0E098 65%, #C6A530 85%, #9B7A20 100%); font-size: 20px; letter-spacing: 1px; padding: 20px 40px 16px; }
.jos-order-cta span { transform: none; }
.elementor-add-to-cart .single_add_to_cart_button { border-radius: 100px !important; }

/* Roster sections */
.jos-roster-section {
    margin: var(--jos-space-sm) 0; padding: var(--jos-space-md);
    border: 1px solid var(--jos-border); border-radius: var(--jos-radius-lg);
    background: var(--jos-bg-white);
}
.jos-roster-section h5 {
    margin: 0; font-family: var(--jos-font-body);
    font-size: 14px; font-weight: 600; text-transform: none;
    color: var(--jos-heading); line-height: 1;
    display: flex; justify-content: space-between; align-items: center;
}
.jos-roster-section h5 .jos-roster-count { color: var(--jos-text-muted); font-weight: normal; font-size: var(--jos-font-size-xs); font-family: var(--jos-font-body); text-transform: none; }
/* Roster edit panel — full width to container edges */
.jos-roster-table-wrap {
    background: var(--jos-bg-white); overflow: hidden; margin-top: var(--jos-space-sm);
    margin-left: calc(-1 * var(--jos-space-md)); margin-right: calc(-1 * var(--jos-space-md));
    margin-bottom: calc(-1 * var(--jos-space-md));
    border-top: 1px solid var(--jos-border-light);
}
/* Roster-specific widgets (column widths shared from the unified rules above). */
.jos-roster-table .jos-player-remove,
.jos-matrix .jos-player-remove { background: none; border: none; color: var(--jos-text-muted); cursor: pointer; font-size: 18px; padding: 4px; line-height: 1; transition: color var(--jos-transition); }
.jos-roster-table .jos-player-remove:hover,
.jos-matrix .jos-player-remove:hover { color: var(--jos-danger); }

/* Fix: # header color — compound .jos-col-idx rule forces gray on thead th too, override to white */
.jos-roster-table thead th.jos-col-idx,
.jos-matrix thead th.jos-col-idx,
.jos-cart-edit-table thead th.jos-col-idx { color: #fff !important; }

/* Override Elementor WooCommerce My Account widget, which strips zebra/borders/padding from tables inside the widget. Restore matrix-style styling on .jos-roster-table. */
.jos-roster-table tbody > tr:nth-child(odd) > td { background: rgba(128, 128, 128, 0.07) !important; }
.jos-roster-table tbody > tr:nth-child(even) > td { background: transparent !important; }
.jos-roster-table tbody > tr:hover > td { background: var(--jos-bg-light) !important; }
.jos-roster-table td {
    border-bottom: 1px solid var(--jos-border-light) !important;
    border-right: 1px solid var(--jos-border-light) !important;
    padding: 8px 12px !important;
}
.jos-roster-table td:last-child { border-right: none !important; padding-right: var(--jos-space-md) !important; }
.jos-roster-table tbody tr:last-child td { border-bottom: none !important; }
.jos-roster-table td:first-child { padding-left: var(--jos-space-md) !important; }
/* Preserve tight column-specific side padding (overrides the generic td rule above) */
.jos-roster-table td.jos-col-idx { padding-left: 8px !important; padding-right: 8px !important; }
.jos-roster-table td.jos-col-remove { padding-left: 4px !important; padding-right: 4px !important; }

/* Roster action buttons — pill style */
.jos-roster-actions {
    display: flex; gap: var(--jos-space-sm); align-items: center;
    padding: 12px var(--jos-space-md);
    background: var(--jos-bg-light); border-top: 1px solid var(--jos-border-light);
    flex-wrap: wrap;
}
/* ============================================================
   UNIFIED PILL ACTION BUTTONS
   Base pill style shared by: .jos-btn-pill, .jos-add-player-btn,
   .jos-save-roster-btn, .jos-delete-roster-btn, .jos-create-roster-btn,
   .jos-csv-upload-btn. Differentiate by color modifier or the class itself.
   ============================================================ */
.jos-btn-pill,
.jos-add-player-btn,
.jos-add-player-btn-10,
.jos-new-roster-add-player,
.jos-new-roster-add-player-10,
.jos-save-roster-btn,
.jos-delete-roster-btn,
.jos-create-roster-btn,
.jos-csv-upload-btn,
.jos-toggle-roster,
.jos-share-row button,
.jos-invite-coach-btn,
.jos-add-roster-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 6px 16px; border-radius: 999px; cursor: pointer;
    font-family: var(--jos-font-body); font-size: 12px; font-weight: 600;
    background: var(--jos-bg-white); color: var(--jos-heading);
    border: 1px solid var(--jos-border-light);
    text-decoration: none; line-height: 1.4;
    box-shadow: var(--jos-btn-shadow);
    transition: background var(--jos-transition), border-color var(--jos-transition), color var(--jos-transition), box-shadow var(--jos-transition);
}
.jos-btn-pill:hover,
.jos-add-player-btn:hover,
.jos-add-player-btn-10:hover,
.jos-new-roster-add-player:hover,
.jos-new-roster-add-player-10:hover,
.jos-create-roster-btn:hover,
.jos-csv-upload-btn:hover,
.jos-toggle-roster:hover,
.jos-share-row button:hover,
.jos-invite-coach-btn:hover,
.jos-add-roster-toggle:hover { background: var(--jos-primary); color: #fff; border-color: var(--jos-primary); }

/* Filled primary pill (Save / Create Roster) — visually marks the form's
   submit action so it stands apart from the row-add and CSV buttons. */
.jos-save-roster-btn,
.jos-create-roster-btn { background: linear-gradient(to bottom, #004a99 0%, #003572 100%); border-color: var(--jos-primary); color: #fff; }
.jos-save-roster-btn:hover,
.jos-create-roster-btn:hover { background: linear-gradient(to bottom, #0055b3 0%, #004a99 100%); border-color: var(--jos-primary-hover); color: #fff; }
.jos-save-roster-btn:disabled,
.jos-create-roster-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* Danger outline pill (Delete) */
.jos-delete-roster-btn { background: none; border-color: var(--jos-danger); color: var(--jos-danger); margin-left: auto; }
.jos-delete-roster-btn:hover { background: var(--jos-danger); color: #fff; border-color: var(--jos-danger); }

/* Color variants for .jos-btn-pill */
.jos-btn-pill.success { background: linear-gradient(to bottom, #34c759 0%, #28a745 100%); border-color: var(--jos-success); color: #fff; }
.jos-btn-pill.success:hover { background: linear-gradient(to bottom, #2eb54f 0%, #218838 100%); border-color: #218838; color: #fff; }
.jos-btn-pill.danger { background: none; border-color: var(--jos-danger); color: var(--jos-danger); }
.jos-btn-pill.danger:hover { background: var(--jos-danger); border-color: var(--jos-danger); color: #fff; }
.jos-btn-pill:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.jos-roster-status { font-size: var(--jos-font-size-xs); font-family: var(--jos-font-body); }
.jos-roster-status.success { color: var(--jos-success); }
.jos-roster-status.error { color: var(--jos-danger); }

/* New roster form */
.jos-new-roster-form {
    display: flex; align-items: center; gap: var(--jos-space-sm);
    margin: var(--jos-space-sm) 0; flex-wrap: wrap;
}
.jos-new-roster-form input[type="text"] {
    padding: var(--jos-input-compact-padding);
    border: 1px solid var(--jos-input-border-color);
    border-bottom: 2px solid var(--jos-input-border-color);
    border-radius: var(--jos-input-radius);
    font-size: var(--jos-input-compact-font-size); font-family: var(--jos-font-body);
    color: var(--jos-heading); background: var(--jos-input-bg); width: 220px; box-sizing: border-box;
    transition: border-color var(--jos-transition), box-shadow var(--jos-transition);
}
.jos-new-roster-form input[type="text"]:focus-visible { outline: 2px solid var(--jos-primary); outline-offset: 2px; border-color: var(--jos-primary); box-shadow: 0 0 0 2px var(--jos-primary-subtle); }
/* .jos-create-roster-btn — shares unified pill base above. */

/* CSV upload button (in roster actions bar) */
/* .jos-csv-upload-btn — shares unified pill base above. */
.jos-csv-template-link {
    font-size: 11px; color: var(--jos-text-muted); text-decoration: underline;
    cursor: pointer; font-family: var(--jos-font-body);
}
.jos-csv-template-link:hover { color: var(--jos-primary); }
.jos-csv-status { font-size: var(--jos-font-size-xs); font-family: var(--jos-font-body); }
.jos-csv-status.success { color: var(--jos-success); }
.jos-csv-status.error { color: var(--jos-danger); }

/* CSV Modal — dropzone */
.jos-csv-dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 28px 20px; border: 2px dashed var(--jos-border); border-radius: var(--jos-radius-lg);
    background: var(--jos-bg-light); cursor: pointer;
    transition: border-color var(--jos-transition), background var(--jos-transition);
    text-align: center; gap: 8px;
}
.jos-csv-dropzone:hover, .jos-csv-dropzone.dragover {
    border-color: var(--jos-primary); background: rgba(189, 168, 84, 0.05);
}
.jos-csv-dropzone-icon { color: var(--jos-text-muted); }
.jos-csv-dropzone.has-file .jos-csv-dropzone-icon { color: var(--jos-success); }
.jos-csv-dropzone-main {
    display: block; font-size: 14px; font-weight: 600; color: var(--jos-heading);
    font-family: var(--jos-font-body);
}
.jos-csv-dropzone-sub {
    display: block; font-size: 12px; color: var(--jos-text-muted);
    font-family: var(--jos-font-body); margin-top: 2px;
}
.jos-csv-dropzone-file {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; background: var(--jos-bg-white);
    border: 1px solid var(--jos-border-light); border-radius: 999px;
    font-size: 13px; font-weight: 600; color: var(--jos-heading);
    font-family: var(--jos-font-body);
}
.jos-csv-dropzone-change {
    background: none; border: none; color: var(--jos-primary); cursor: pointer;
    font-size: 12px; font-weight: 600; font-family: var(--jos-font-body);
    text-decoration: underline; padding: 0; margin-top: 4px;
}
.jos-csv-dropzone-change:hover { color: var(--jos-heading); }

/* CSV Modal — sections */
.jos-csv-section {
    margin-top: var(--jos-space-md); padding-top: var(--jos-space-md);
    border-top: 1px solid var(--jos-border-light);
}
.jos-csv-section-label {
    font-size: 13px; font-weight: 700; color: var(--jos-heading);
    font-family: var(--jos-font-body); text-transform: uppercase;
    letter-spacing: 0.3px; margin-bottom: 10px;
}

/* CSV Modal — mode cards */
.jos-csv-mode-cards { display: flex; gap: 10px; }
.jos-csv-mode-card {
    flex: 1; display: flex; cursor: pointer;
    padding: 12px 14px; border: 2px solid var(--jos-border-light);
    border-radius: var(--jos-radius); background: var(--jos-bg-white);
    transition: border-color var(--jos-transition), background var(--jos-transition);
}
.jos-csv-mode-card input { display: none; }
.jos-csv-mode-card.active {
    border-color: var(--jos-primary); background: rgba(189, 168, 84, 0.05);
}
.jos-csv-mode-card-inner { display: flex; flex-direction: column; gap: 2px; }
.jos-csv-mode-card-inner strong {
    font-size: 13px; font-weight: 700; color: var(--jos-heading);
    font-family: var(--jos-font-body);
}
.jos-csv-mode-card-inner span {
    font-size: 11px; color: var(--jos-text-muted); line-height: 1.4;
    font-family: var(--jos-font-body);
}

/* CSV Modal — replace warning */
.jos-csv-warning {
    margin-top: 10px; padding: 10px 14px; border-radius: var(--jos-radius);
    background: #fef3cd; border: 1px solid #ffc107;
    font-size: 12px; font-weight: 600; color: #856404;
    font-family: var(--jos-font-body);
}

/* CSV Modal — preview */
.jos-csv-preview-wrap {
    max-height: 180px; overflow-y: auto;
    border: 1px solid var(--jos-border-light); border-radius: var(--jos-radius);
}
#jos-csv-modal-preview .jos-roster-table td {
    padding: 6px 12px; font-size: 13px; color: var(--jos-text);
}

/* New roster CSV upload — stacked below the create form */
.jos-new-roster-csv {
    display: flex; gap: var(--jos-space-sm); align-items: center;
    margin: var(--jos-space-xs) 0; flex-wrap: wrap;
}

/* Products list */
.jos-products-list { list-style: none; padding: 0; margin: 10px 0; }
.jos-products-list li { padding: var(--jos-space-sm) 0; border-bottom: 1px solid var(--jos-border-light); }
.jos-products-list li:last-child { border-bottom: none; }
.jos-products-list a { text-decoration: none; color: var(--jos-heading); font-weight: 600; }
.jos-products-list a:hover { color: var(--jos-primary); }
.jos-products-list .jos-product-price { color: var(--jos-text-muted); margin-left: 6px; }
.jos-products-list .jos-price-override { color: var(--jos-success); font-weight: 500; }

/* Share / link row */
.jos-share-section p { font-size: 13px; color: var(--jos-text-muted); margin: 4px 0 8px; }
.jos-share-row { display: flex; gap: var(--jos-space-sm); align-items: center; }
.jos-share-row input {
    flex: 1; padding: var(--jos-input-compact-padding);
    border: 1px solid var(--jos-input-border-color);
    border-bottom: 2px solid var(--jos-input-border-color);
    border-radius: var(--jos-input-radius);
    font-size: var(--jos-input-compact-font-size); font-family: var(--jos-font-body);
    color: var(--jos-text-muted); background: var(--jos-input-bg); box-sizing: border-box;
}
/* .jos-share-row button and .jos-toggle-roster now use the unified .jos-btn-pill family styling above */

/* Product mockup thumbnails */
.jos-product-mockups { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.jos-product-mockups img {
    width: 60px; height: 60px; object-fit: cover;
    border: 1px solid var(--jos-border); border-radius: var(--jos-radius-sm);
    cursor: pointer; transition: border-color var(--jos-transition), box-shadow var(--jos-transition);
}
.jos-product-mockups img:hover { border-color: var(--jos-primary); box-shadow: var(--jos-shadow-sm); }

/* Revision banners */
.jos-revision-banner { padding: 12px var(--jos-space-md); border-radius: var(--jos-radius); margin-bottom: var(--jos-space-md); font-size: var(--jos-font-size-sm); }
.jos-revision-banner.pending { background: var(--jos-warning-bg); border: 1px solid var(--jos-warning-border); color: var(--jos-warning-text); }
.jos-revision-banner.ready { background: var(--jos-success-bg); border: 1px solid var(--jos-success-border); color: var(--jos-success-text); }

/* Revision buttons */
.jos-btn-revision { padding: 6px 14px; border-radius: var(--jos-radius-sm); cursor: pointer; font-size: 13px; font-family: var(--jos-font-body); border: none; box-shadow: var(--jos-btn-shadow); transition: background var(--jos-transition), box-shadow var(--jos-transition), opacity var(--jos-transition); }
.jos-btn-revision.request { background: linear-gradient(to bottom, #ffce2e 0%, #ffc107 100%); color: var(--jos-heading); }
.jos-btn-revision.request:hover { background: linear-gradient(to bottom, #ecb820 0%, #e0a800 100%); }
.jos-btn-revision.approve { background: linear-gradient(to bottom, #34c759 0%, #28a745 100%); color: #fff; }
.jos-btn-revision.approve:hover { background: linear-gradient(to bottom, #2eb54f 0%, #218838 100%); }
.jos-btn-revision.changes { background: linear-gradient(to bottom, #e8494b 0%, #d63638 100%); color: #fff; }
.jos-btn-revision.changes:hover { background: linear-gradient(to bottom, #d93b3d 0%, #c82333 100%); }
.jos-btn-revision:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.jos-revision-status { font-size: var(--jos-font-size-xs); margin-left: var(--jos-space-sm); }

/* Product grid — matches wizard style */
.jos-products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: var(--jos-space-sm); }
.jos-product-item {
    display: flex; flex-direction: column;
    border: 1px solid var(--jos-border); border-radius: var(--jos-radius-lg);
    overflow: hidden; background: var(--jos-bg-white); padding: 10px;
    transition: border-color var(--jos-transition), box-shadow var(--jos-transition);
    position: relative;
}
.jos-product-item:hover { border-color: var(--jos-primary); box-shadow: var(--jos-shadow-sm); }
.jos-product-item.jos-product-pending { border-color: var(--jos-warning); }
.jos-product-item.jos-product-ready { border-color: var(--jos-success); }
.jos-product-item-img { width: 100%; aspect-ratio: 1080 / 763; overflow: hidden; background: var(--jos-bg-light); border-radius: var(--jos-radius); position: relative; }
.jos-product-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jos-product-item-img .jos-no-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 12px; }
.jos-product-item-info { padding: 8px 4px 4px; text-align: center; flex: 1; }
.jos-product-item-info a { display: block; font-family: var(--jos-font-heading) !important; font-size: 15px; font-weight: 600; text-transform: uppercase; color: var(--jos-primary) !important; line-height: 1.2; text-decoration: none !important; }
.jos-product-item-info a:hover { color: var(--jos-heading) !important; }
.jos-product-item-price { display: block; font-size: 13px; color: var(--jos-text-muted); font-weight: 600; margin-top: 2px; }
.jos-product-item .jos-status-badge { position: absolute; bottom: 0; left: 0; right: 0; border-radius: 0; text-align: center; padding: 4px 8px; font-size: 11px; z-index: 2; }
.jos-product-item .jos-status-badge.pending { background: var(--jos-warning); color: var(--jos-heading); border: none; }
.jos-product-item .jos-status-badge.ready { background: var(--jos-success); color: #fff; border: none; }
.jos-product-item-action { text-align: center; padding-top: 6px; margin-top: auto; }
/* Product grid pill: shares unified pill base; only size tweak here */
.jos-product-item-action .jos-btn-pill { padding: 5px 14px; font-size: 11px; }

/* Status badges */
.jos-status-badge { font-size: 11px; font-weight: 600; text-transform: uppercase; padding: 2px 8px; border-radius: var(--jos-radius-sm); letter-spacing: 0.3px; }
.jos-status-badge.pending { background: var(--jos-warning-bg); color: var(--jos-warning-text); border: 1px solid var(--jos-warning-border); }
.jos-status-badge.ready { background: var(--jos-success-bg); color: var(--jos-success-text); border: 1px solid var(--jos-success-border); }

/* Admin/designer notes */
.jos-admin-notes { background: var(--jos-bg-light); padding: 10px 14px; border-radius: var(--jos-radius-sm); margin: 10px 0; font-size: 13px; border-left: 3px solid var(--jos-primary); }

/* Empty state */
.jos-empty-state { font-size: 13px; color: var(--jos-text-muted); font-style: italic; padding: var(--jos-space-sm) 0; }

/* Responsive - My Teams */
@media (max-width: 768px) {
    .jos-products-grid { grid-template-columns: 1fr; gap: 10px; }
    .jos-team-card { padding: 0; }
    .jos-team-card h3 { font-size: 22px; }
    .jos-team-card h4, .jos-team-card h4:first-of-type { margin-top: 24px; }
    .jos-team-info { flex-direction: column; align-items: flex-start; gap: var(--jos-space-sm); }
    .jos-team-info-item { flex-wrap: wrap; }
    .jos-order-cta { margin-top: 24px; }
    .jos-share-section input { font-size: 12px; }
    /* Roster column widths on mobile (base styles covered by unified table mobile above) */
    .jos-roster-table .jos-col-number { width: 60px; }
    .jos-roster-table .jos-col-jersey { width: 20%; }
    .jos-product-item-info a { font-size: 16px; }
    .jos-product-mockups img { width: 50px; height: 50px; }
    .jos-new-roster-form { flex-direction: column; align-items: stretch; }
    .jos-new-roster-form input[type="text"] { width: 100%; }
}
@media (max-width: 600px) {
    .jos-team-card { overflow: hidden; }
    .site-main { overflow-x: hidden; }
    .jos-roster-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .jos-roster-table { min-width: 420px; }
    .jos-roster-actions {
        display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
        padding: 12px;
    }
    .jos-roster-actions button {
        width: 100%; text-align: center; margin-left: 0;
    }
    .jos-roster-table .jos-col-number { width: 50px; }
    .jos-roster-table td { padding: 6px 8px; }
    .jos-roster-table input, .jos-roster-table select { padding: 6px; font-size: 12px; }
}


/* ==========================================================================
   6. PENDING DESIGNS
   ========================================================================== */

/* ── Pending design card ── */
.jos-pending-design {
    border: 1px solid var(--jos-border);
    padding: var(--jos-space-lg);
    margin-bottom: var(--jos-space-lg);
    border-radius: var(--jos-radius-lg);
    background: var(--jos-bg-white);
}

/* ── Team name heading ── */
.jos-pending-design h3 {
    margin: 0 0 var(--jos-space-xs) 0;
    font-family: var(--jos-font-heading) !important;
    font-weight: 700; text-transform: uppercase;
    color: var(--jos-heading); font-size: 32px !important; line-height: 1;
    letter-spacing: 0.5px;
}
.jos-pending-design h3 small {
    font-family: var(--jos-font-body) !important;
    color: var(--jos-text-muted); font-weight: 400;
    font-size: 13px; text-transform: none; letter-spacing: 0;
}

/* ── Status notice box ── */
.jos-pending-design .jos-status-notice {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    border-radius: var(--jos-radius);
    margin: 0 0 var(--jos-space-lg) 0;
    border: 1px solid var(--jos-border-light);
    background: var(--jos-bg-light);
}
.jos-pending-design .jos-status-notice.status-sent_for_review {
    background: #EFF6FF;
    border-color: #BFDBFE;
}
.jos-pending-design .jos-status-notice.status-changes_requested {
    background: #FFFBEB;
    border-color: #FDE68A;
}
.jos-pending-design .jos-status-notice.status-pending {
    background: var(--jos-bg-light);
    border-color: var(--jos-border-light);
}
.jos-pending-design .jos-status-notice.status-approved {
    background: var(--jos-success-bg);
    border-color: var(--jos-success-border);
}
.jos-pending-design .jos-status-badge {
    display: inline-block;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--jos-font-body);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}
.jos-pending-design .jos-status-description {
    font-size: 14px;
    color: var(--jos-heading);
    font-family: var(--jos-font-body);
    line-height: 1.5;
    margin: 0;
}

/* ── Mockup section label ── */
.jos-pending-design .jos-mockup-label {
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--jos-heading);
    font-family: var(--jos-font-heading);
    margin: var(--jos-space-md) 0 var(--jos-space-lg) 0 !important;
    line-height: 1;
}

/* ── Mockup images ── */
.jos-mockup-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0;
}
.jos-mockup-images a {
    display: block;
    padding: 10px;
    border: 1px solid var(--jos-border);
    background: var(--jos-bg-white);
    transition: border-color var(--jos-transition), box-shadow var(--jos-transition);
}
.jos-mockup-images a:hover {
    border-color: var(--jos-primary);
    box-shadow: var(--jos-shadow-md);
}
.jos-mockup-images img {
    display: block;
    width: 100%;
    height: auto;
    border: none;
    cursor: pointer;
}

/* ── Product mockup card (when multiple designs) ── */
.jos-pending-design .jos-mockup-product-card {
    padding: 16px;
    background: var(--jos-bg-light);
    border: 1px solid var(--jos-border-light);
    border-radius: var(--jos-radius);
    margin-bottom: 12px;
}
.jos-pending-design .jos-mockup-product-card h4 {
    margin: 0 0 12px 0;
    font-family: var(--jos-font-heading) !important;
    font-size: 18px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--jos-heading);
    line-height: 1;
}
.jos-pending-design .jos-no-mockup {
    color: var(--jos-text-muted);
    font-size: 13px;
    font-family: var(--jos-font-body);
    font-style: italic;
}

/* ── Admin notes ── */
.jos-pending-design .jos-admin-notes {
    margin-top: var(--jos-space-md);
    padding: 16px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: var(--jos-radius);
}
.jos-pending-design .jos-admin-notes-heading {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #92400E;
    font-family: var(--jos-font-body);
    margin: 0 0 6px 0;
}
.jos-pending-design .jos-admin-notes p:last-child {
    margin: 0;
    white-space: pre-line;
    font-size: 14px;
    color: var(--jos-heading);
    font-family: var(--jos-font-body);
    line-height: 1.5;
}

/* ── Review actions bar ── */
.jos-review-actions {
    margin-top: var(--jos-space-lg);
    padding-top: var(--jos-space-lg);
    border-top: 1px solid var(--jos-border-light);
    display: flex; gap: 12px; flex-wrap: wrap;
    align-items: center;
}

/* .jos-btn-approve — alias of .jos-btn-gold (see top of file). */

/* .jos-btn-changes — alias of .jos-btn-secondary (see top of file). */

/* Ensure review action buttons are equal height */
.jos-review-actions .jos-btn-approve,
.jos-review-actions .jos-btn-changes {
    padding: 14px 28px;
    font-size: 16px;
}

/* ── Approve confirmation ── */
.jos-confirm-approve {
    display: none;
    width: 100%;
    margin-top: var(--jos-space-md);
    padding: 16px 20px;
    background: var(--jos-success-bg);
    border: 1px solid var(--jos-success-border);
    border-radius: var(--jos-radius);
}
.jos-confirm-approve p {
    margin: 0 0 14px 0;
    font-family: var(--jos-font-body);
    font-size: 14px;
    color: var(--jos-heading);
    line-height: 1.5;
}
/* Approve-confirm buttons now use .jos-btn-pill directly — no overrides needed. */
.jos-confirm-approve .jos-btn-pill { margin-right: 8px; }

/* ── Success message ── */
.jos-success-message {
    background: var(--jos-success-bg);
    border: 1px solid var(--jos-success-border);
    color: var(--jos-success-text);
    padding: 16px 20px;
    border-radius: var(--jos-radius);
    margin-bottom: var(--jos-space-md);
    font-family: var(--jos-font-body);
    font-size: 14px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .jos-pending-design { padding: var(--jos-space-md); }
    .jos-pending-design h3 { font-size: 24px !important; }
    .jos-mockup-images { grid-template-columns: 1fr; }
    .jos-review-actions { flex-direction: column; }
    .jos-btn-approve, .jos-btn-changes { width: 100%; text-align: center; justify-content: center; }
}


/* ==========================================================================
   7. ACCESSIBILITY
   ========================================================================== */

/* Screen reader only — visually hidden but accessible */
.screen-reader-text {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* Keyboard focus ring on the CSV dropzone (its file input is off-screen via screen-reader-text) */
.jos-csv-dropzone:focus-within {
    outline: 2px solid var(--jos-primary);
    outline-offset: 2px;
}

/* Same ring for the upload dropzones, where the off-screen input precedes its label */
input.screen-reader-text:focus + .jos-upload-area {
    outline: 2px solid var(--jos-primary);
    outline-offset: 2px;
    border-color: var(--jos-primary);
}

/* Global focus-visible for interactive elements */
.jos-btn-primary:focus-visible, .jos-btn-secondary:focus-visible, .jos-btn-gold:focus-visible,
.jos-btn-text:focus-visible, .jos-btn-approve:focus-visible,
.jos-btn-changes:focus-visible, .jos-btn-next:focus-visible, .jos-btn-back:focus-visible,
.jos-btn-cart:focus-visible, .jos-add-player-btn:focus-visible, .jos-add-player-btn-10:focus-visible, .jos-save-roster-btn:focus-visible,
.jos-delete-roster-btn:focus-visible, .jos-create-roster-btn:focus-visible,
.jos-csv-upload-btn:focus-visible, .jos-csv-template-link:focus-visible,
.jos-add-design:focus-visible, .jos-design-remove:focus-visible,
.jos-player-remove:focus-visible, .jos-remove-btn:focus-visible,
.jos-mockup-images a:focus-visible, .jos-product-preview-inner:focus-visible {
    outline: 2px solid var(--jos-primary);
    outline-offset: 2px;
}

/* Confirm/Alert dialog — always on top */
#jos-dialog-overlay { z-index: 200000; }

/* S2: WooCommerce breadcrumb link contrast fix
 * Default #767676 on #eeeeee = 3.91:1 (fails AA 4.5:1).
 * #595959 on #eeeeee = 5.28:1 (passes AA). */
.woocommerce-breadcrumb a {
    color: var(--jos-text-muted); /* #595959 */
}
.woocommerce-breadcrumb a:hover {
    color: var(--jos-heading); /* #101828 */
}

/* S5: WooCommerce checkout discount color contrast fix
 * Default #4ab866 on #fff = 2.51:1 (fails AA).
 * #1e7735 on #fff = 5.5:1 (passes AA). */
.wc-block-components-totals-discount .wc-block-components-totals-item__value {
    color: #1e7735;
}

/* S6: WooCommerce my-account links must be distinguishable
 * without relying on color alone (underline required). */
.woocommerce-MyAccount-content a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.woocommerce-MyAccount-content a:hover {
    text-decoration-thickness: 2px;
}
/* Don't underline buttons styled as links */
.woocommerce-MyAccount-content a.woocommerce-Button,
.woocommerce-MyAccount-content a.button {
    text-decoration: none;
}

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


/* ── Product Page Team CTA ─────────────────────────────── */

.jos-product-cta {
    background: var(--jos-bg-dark);
    border-left: 4px solid #BDA854;
    padding: var(--jos-space-lg);
    margin-bottom: var(--jos-space-lg);
    text-align: center;
}

/* Product page inline ordering form — light variant */
.elementor-element:has(.jos-product-cta[data-product-id]) { width: 100% !important; align-self: stretch !important; }
.jos-product-cta[data-product-id] {
    background: #fff;
    border: 1px solid var(--jos-border-light);
    border-radius: var(--jos-radius);
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}
.jos-product-cta[data-product-id] .jos-product-cta__heading { color: var(--jos-heading); }
.jos-product-cta[data-product-id] .jos-product-cta__subtext { color: var(--jos-text-muted); }
.jos-product-cta[data-product-id] select.jos-input {
    width: 100%; max-width: none; display: block;
    color: var(--jos-heading) !important;
    background-color: var(--jos-input-bg) !important;
    border-color: var(--jos-input-border-color) !important;
}
/* Table flush to card edges */
/* PDP table scroll wrapper — flush to card edges, scrollable on mobile */
.jos-pdp-table-scroll {
    margin-left: calc(-1 * var(--jos-space-lg));
    margin-right: calc(-1 * var(--jos-space-lg));
    width: calc(100% + 2 * var(--jos-space-lg));
}
.jos-pdp-table-scroll .jos-cart-edit-table {
    width: 100% !important;
    margin: 0 !important;
}
@media (max-width: 768px) {
    .jos-pdp-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .jos-pdp-table-scroll .jos-cart-edit-table {
        min-width: 420px;
        table-layout: auto !important;
    }
    .jos-pdp-table-scroll .jos-cart-edit-table .jos-col-jersey { min-width: 140px; }
    .jos-pdp-table-scroll .jos-cart-edit-table .jos-col-number { width: 60px; }
    .jos-pdp-table-scroll .jos-cart-edit-table .jos-col-size { width: 130px; }
    .jos-pdp-table-scroll .jos-cart-edit-table .jos-col-remove { width: 32px; }
    .jos-pdp-table-scroll .jos-cart-edit-table .jos-col-idx { width: 28px; }
    .jos-pdp-table-scroll .jos-cart-edit-table td { padding: 6px 8px !important; }
    .jos-pdp-table-scroll .jos-cart-edit-table input,
    .jos-pdp-table-scroll .jos-cart-edit-table select { padding: 6px !important; font-size: 12px !important; }
}
.jos-product-cta[data-product-id] .jos-muted-text { color: var(--jos-text-muted); }
.jos-product-cta[data-product-id] .jos-order-cta { margin-top: var(--jos-space-lg); }
/* Labels — match .jos-quote-form label */
.jos-pdp-label {
    display: block;
    font-family: var(--jos-font-body);
    font-weight: 600;
    font-size: var(--jos-font-size-sm);
    color: var(--jos-heading);
    margin-bottom: 6px;
}
/* + Add Player Manually — white pill */
.jos-product-cta[data-product-id] .jos-btn-text {
    display: inline-block; padding: 6px 14px;
    background: var(--jos-bg-white); color: var(--jos-heading);
    border: 1px solid var(--jos-border-light);
    border-radius: 999px; cursor: pointer;
    font-family: var(--e-global-typography-925ac09-font-family), Sans-serif;
    font-weight: 600; font-size: 13px; text-transform: none; letter-spacing: normal;
    box-shadow: var(--jos-btn-shadow);
    transition: background var(--jos-transition), color var(--jos-transition), box-shadow var(--jos-transition);
}
.jos-product-cta[data-product-id] .jos-btn-text:hover {
    background: var(--jos-primary); color: #fff !important; border-color: var(--jos-primary);
}

.jos-product-cta__heading {
    margin: 0 0 var(--jos-space-sm);
    font-family: var(--jos-font-heading);
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #FFFFFF;
    line-height: 1;
}

.jos-product-cta__subtext {
    margin: 0 0 var(--jos-space-md);
    font-family: var(--jos-font-body);
    font-size: var(--jos-font-size-sm);
    color: var(--jos-text-faint);
}

.jos-product-cta__teams {
    display: flex;
    flex-wrap: wrap;
    gap: var(--jos-space-sm);
    justify-content: center;
}

.jos-product-cta--empty {
    background: var(--jos-bg-light);
    border-left: 4px solid var(--jos-border);
    padding: var(--jos-space-md) var(--jos-space-lg);
    margin-bottom: var(--jos-space-lg);
    text-align: left;
}

.jos-product-cta--empty p {
    margin: 0;
    font-family: var(--jos-font-body);
    font-size: var(--jos-font-size-sm);
    color: var(--jos-text-muted);
}

@media (max-width: 480px) {
    .jos-product-cta__teams {
        flex-direction: column;
        align-items: center;
    }
}

/* ── Product Image Wipe Transition (matches homepage slideshow wipe) ── */
.jos-image-wipe {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
}
.jos-image-wipe__color,
.jos-image-wipe__stripe {
    position: absolute;
    top: -30%;
    left: -80%;
    width: 0%;
    height: 180%;
    transform: skewX(-45deg);
    transform-origin: top left;
    will-change: width, left;
}
.jos-image-wipe__color { background: #c8291a; z-index: 2; }
.jos-image-wipe__stripe { background: rgb(100, 21, 13); z-index: 1; }

/* Wipe In — panels expand to cover image */
@keyframes josWipeInPanel {
    from { width: 0%; left: -80%; }
    to   { width: 320%; left: -80%; }
}
/* Wipe Out — panels slide right to reveal new image */
@keyframes josWipeOutPanel {
    from { width: 320%; left: -80%; }
    to   { width: 320%; left: 250%; }
}
.jos-image-wipe--in .jos-image-wipe__color {
    animation: josWipeInPanel 0.35s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.jos-image-wipe--in .jos-image-wipe__stripe {
    animation: josWipeInPanel 0.35s cubic-bezier(0.65, 0, 0.35, 1) 0.08s forwards;
}
.jos-image-wipe--out .jos-image-wipe__color {
    animation: josWipeOutPanel 0.35s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.jos-image-wipe--out .jos-image-wipe__stripe {
    animation: josWipeOutPanel 0.35s cubic-bezier(0.65, 0, 0.35, 1) 0.07s forwards;
}
@media (prefers-reduced-motion: reduce) {
    .jos-image-wipe { display: none; }
}

/* ── Product CTA Select Dropdown ── */

.jos-product-cta__select {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto var(--jos-space-md);
    padding: 12px 16px;
    font-family: var(--jos-font-body);
    font-size: var(--jos-font-size-base);
    font-weight: 600;
    color: #FFFFFF;
    background-color: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: var(--jos-radius);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23BDA854' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    transition: border-color var(--jos-transition);
}

.jos-product-cta__select:hover,
.jos-product-cta__select:focus {
    border-color: #BDA854;
    outline: none;
}

.jos-product-cta__select option {
    background: #1a1a1a;
    color: #FFFFFF;
}

/* ── Add Roster Collapsible ─────────────────────────────── */

/* Add Roster toggle keeps its top margin; the pill base rule above provides the look. */
.jos-add-roster-toggle { margin: var(--jos-space-xs) 0 var(--jos-space-sm); gap: 6px; }

.jos-add-roster-panel__inner {
    margin: var(--jos-space-sm) 0;
    padding: var(--jos-space-md);
    background: var(--jos-bg-light);
    border: 1px solid var(--jos-border-light);
    border-radius: var(--jos-radius);
}

.jos-add-roster-divider {
    display: flex;
    align-items: center;
    gap: var(--jos-space-sm);
    margin: var(--jos-space-sm) 0;
    color: var(--jos-text-faint);
    font-size: 12px;
    font-family: var(--jos-font-body);
}
.jos-add-roster-divider::before,
.jos-add-roster-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--jos-border-light);
}

/* Fix: theme/WC JS hides table rows inside cart — force our modal rows visible */
.jos-cart-modal .jos-cart-player-row {
    display: table-row !important;
}


/* ==========================================================================
/* Manual entry link style in wizard empty state */
.jw-manual-link {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    color: var(--jos-text-muted, #888);
    font-family: var(--jos-font-body, sans-serif);
    font-size: 13px;
    font-weight: 400;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.15s ease;
}
.jw-manual-link:hover {
    color: var(--jos-heading, #101828);
}

.jos-wizard-loading {
    display: block;
    padding: 16px;
    font-size: 13px;
    color: var(--jos-text-muted, #888);
}

/* ==========================================================================
   WIZARD MANUAL ENTRY - Mobile
   ========================================================================== */
@media (max-width: 768px) {
    /* Manual player entry — scrollable table only */
    #jw-player-entry-mode {
        max-width: 100%;
        min-width: 0;
    }
    .jw-table-scroll-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #jw-new-player-table {
        min-width: 420px;
    }

    /* Action buttons — 2-col grid */
    #jw-player-entry-mode > div {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px !important;
        margin: 10px 12px 16px !important;
        max-width: calc(100vw - 60px);
    }
    #jw-player-entry-mode > div > button,
    #jw-player-entry-mode > div > a {
        text-align: center;
    }

    /* Download Template — styled as subtle link */
    .jos-csv-template-link {
        grid-column: 1 / -1;
        font-size: 12px !important;
        color: var(--jos-text-muted, #888) !important;
        text-align: center !important;
    }
}

/* ==========================================================================
   WIZARD PROGRESS BAR - Mobile
   ========================================================================== */
@media (max-width: 768px) {
    .jos-step-indicator {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        position: relative;
        padding: 0 48px;
        margin-bottom: 8px;
    }
    .jos-step-indicator::before {
        content: '';
        position: absolute;
        top: 16px;
        left: calc(48px + 16px);
        right: calc(48px + 16px);
        height: 2px;
        background: var(--jos-border, #ddd);
        z-index: 0;
    }
    .jos-step-dot {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        position: relative !important;
        z-index: 1 !important;
        width: 32px !important;
        flex: 0 0 auto !important;
        font-size: 0 !important;
        cursor: default !important;
        padding: 0 !important;
        border: none !important;
        border-bottom: none !important;
        background: transparent !important;
        text-align: center !important;
        letter-spacing: 0 !important;
        color: transparent !important;
    }
    .jos-step-dot::before {
        content: attr(data-step);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 2px solid var(--jos-border, #ddd);
        background: #fff;
        color: var(--jos-text-muted, #888);
        font-family: var(--jos-font-heading, 'Teko', sans-serif);
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
        box-sizing: border-box;
        padding-top: 3px;
        transition: all 0.25s ease;
    }
    .jos-step-dot::after {
        content: '';
        display: block;
        margin-top: 6px;
        font-family: var(--jos-font-body, sans-serif);
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: transparent;
        text-align: center;
        white-space: nowrap;
        transition: color 0.25s ease;
    }
    .jos-step-dot[data-step='1']::after { content: 'Team'; }
    .jos-step-dot[data-step='2']::after { content: 'Products'; }
    .jos-step-dot[data-step='3']::after { content: 'Sizes'; }
    .jos-step-dot[data-step='4']::after { content: 'Review'; }
    .jos-step-dot.active::before {
        background: var(--jos-primary, #b8962e);
        border-color: var(--jos-primary, #b8962e);
        color: #fff;
    }
    .jos-step-dot.active::after {
        color: var(--jos-heading, #101828);
    }
    .jos-step-dot.done::before {
        background: var(--jos-primary, #b8962e);
        border-color: var(--jos-primary, #b8962e);
        color: #fff;
    }
    .jos-step-dot.done::after {
        color: var(--jos-text-muted, #888);
    }
}

/* ==========================================================================
   SIZE CHART MODAL - Mobile card layout
   ========================================================================== */
@media (max-width: 600px) {
    /* Transform each row into a card */
    #jw-size-chart-modal .jos-table,
    #jw-size-chart-modal .jos-table thead,
    #jw-size-chart-modal .jos-table tbody,
    #jw-size-chart-modal .jos-table tr,
    #jw-size-chart-modal .jos-table th,
    #jw-size-chart-modal .jos-table td {
        display: block;
        width: auto;
    }
    /* Visually hide the table header (cards use inline labels) */
    #jw-size-chart-modal .jos-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
    /* Table wrapper: remove borders/background, add spacing between cards */
    #jw-size-chart-modal .jos-table {
        border: none !important;
        background: transparent !important;
    }
    /* Each row becomes a card */
    #jw-size-chart-modal .jos-table tbody tr {
        background: #fff !important;
        border: 1px solid var(--jos-border);
        border-radius: var(--jos-radius, 8px);
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    /* Each cell becomes a row inside the card */
    #jw-size-chart-modal .jos-table tbody td {
        background: transparent !important;
        border: none !important;
        padding: 3px 0 !important;
        font-size: 13px;
        color: var(--jos-heading);
        line-height: 1.4;
        text-align: left !important;
    }
    /* First cell (Size name) becomes the card title */
    #jw-size-chart-modal .jos-table tbody td:first-child {
        font-family: var(--jos-font-heading, 'Teko', sans-serif);
        font-size: 15px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: var(--jos-heading);
        padding: 0 0 8px 0 !important;
        margin-bottom: 6px;
        text-align: left !important;
        border-bottom: 1px solid var(--jos-border-light) !important;
    }
    /* Inline labels for Height, Weight, Age via ::before */
    #jw-size-chart-modal .jos-table tbody td:nth-child(2)::before { content: 'Height: '; }
    #jw-size-chart-modal .jos-table tbody td:nth-child(3)::before { content: 'Weight: '; }
    #jw-size-chart-modal .jos-table tbody td:nth-child(4)::before { content: 'Age: '; }
    #jw-size-chart-modal .jos-table tbody td:nth-child(2)::before,
    #jw-size-chart-modal .jos-table tbody td:nth-child(3)::before,
    #jw-size-chart-modal .jos-table tbody td:nth-child(4)::before {
        display: inline-block;
        min-width: 60px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: var(--jos-text-muted, #888);
    }
    /* Hide empty age cells' label so it doesn't say "Age:" with nothing after */
    #jw-size-chart-modal .jos-table tbody td:nth-child(4):empty {
        display: none;
    }

    /* Section headings tighter */
    #jw-size-chart-modal h4 {
        font-size: 14px;
        margin: 16px 0 10px;
    }
    /* Single column grid on mobile */
    #jw-size-chart-modal .jos-size-chart-grid {
        gap: 8px;
        grid-template-columns: 1fr;
    }
}
/* Size chart tabs (mobile only) */
.jw-size-chart-tabs {
    display: none;
}
@media (max-width: 600px) {
    .jw-size-chart-tabs {
        display: flex;
        gap: 0;
        margin: 0 0 14px;
        border-bottom: 1px solid var(--jos-border);
    }
    .jw-size-chart-tab {
        flex: 1;
        background: transparent;
        border: none !important;
        border-bottom: 2px solid transparent !important;
        border-radius: 0 !important;
        padding: 10px 8px !important;
        margin-bottom: -1px;
        font-family: var(--jos-font-heading, 'Teko', sans-serif);
        font-size: 15px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: var(--jos-text-muted, #888);
        cursor: pointer;
        transition: color 0.2s ease, border-color 0.2s ease;
    }
    .jw-size-chart-tab:hover {
        color: var(--jos-heading);
        background: transparent !important;
    }
    .jw-size-chart-tab.active {
        color: var(--jos-heading);
        border-bottom-color: var(--jos-primary) !important;
    }
    /* Hide the inactive pane on mobile */
    #jw-size-chart-modal .jw-size-chart-pane:not(.active) {
        display: none;
    }
    /* Hide the h4 labels since the tab already indicates the sex */
    #jw-size-chart-modal .jw-size-chart-pane > h4 {
        display: none;
    }
}
/* Step 4 review summary: structured product + player rows */
.jos-summary-product-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
.jos-summary-product-name { font-weight: 600; color: var(--jos-heading); }
.jos-summary-product-count {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
    color: var(--jos-text-muted); white-space: nowrap;
}
.jos-summary-product-price { font-weight: 600; color: var(--jos-heading); white-space: nowrap; }
.jos-summary-player { align-items: flex-start; }
.jos-summary-player-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.jos-summary-player-name { color: var(--jos-heading); line-height: 1.3; }
.jos-summary-player-size {
    font-size: 11px; color: var(--jos-text-muted);
    text-transform: uppercase; letter-spacing: 0.3px; margin-top: 1px;
}
@media (max-width: 600px) {
    .jos-summary-line.product-line {
        flex-direction: column; align-items: stretch; gap: 2px;
    }
    .jos-summary-product-title { flex-wrap: wrap; }
    .jos-summary-product-name { font-size: 15px; line-height: 1.25; }
    .jos-summary-product-price { align-self: flex-start; font-size: 15px; }
    .jos-summary-player { gap: 6px; }
    .jos-summary-player-name { font-size: 13px; }
}
/* Cart conflict modal (wizard step 4) */
.jw-conflict-modal { max-width: 480px; }
.jw-conflict-modal .jos-cart-modal-body p { margin: 0 0 10px; color: var(--jos-text); }
.jw-conflict-list { list-style: none; padding: 0; margin: 10px 0 14px; }
.jw-conflict-list li {
    padding: 8px 12px; background: var(--jos-bg-subtle, #f7f7f8);
    border: 1px solid var(--jos-border-light);
    border-radius: var(--jos-radius-sm); margin-bottom: 6px; font-size: 14px;
}
.jw-conflict-meta { color: var(--jos-text-muted); font-size: 12px; }

/* Action row: Cancel (tertiary, left) / Add (secondary) / Replace (primary, right) */
.jw-conflict-actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.jw-conflict-actions button {
    flex: 0 0 auto; padding: 10px 18px !important; font-size: 14px !important;
    border-radius: var(--jos-radius-sm) !important; transform: none !important;
    min-width: 0 !important; height: auto !important; line-height: 1.2 !important;
    background: #fff !important; border: 1px solid var(--jos-border) !important;
    color: var(--jos-heading) !important; cursor: pointer;
    font-family: var(--jos-font-heading, 'Teko', sans-serif) !important;
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
}
.jw-conflict-actions button span { transform: none !important; display: inline; color: inherit !important; }
.jw-conflict-actions button[data-action="cancel"] {
    background: transparent !important; border-color: transparent !important;
    color: var(--jos-text-muted) !important; margin-right: auto;
}
.jw-conflict-actions button[data-action="cancel"]:hover {
    color: var(--jos-heading) !important; background: var(--jos-bg-subtle, #f5f5f5) !important;
}
.jw-conflict-actions button[data-action="add"] {
    background: #fff !important; border-color: var(--jos-heading) !important;
    color: var(--jos-heading) !important;
}
.jw-conflict-actions button[data-action="add"]:hover {
    background: var(--jos-bg-subtle, #f5f5f5) !important;
}
.jw-conflict-actions button[data-action="replace"] {
    background: var(--jos-heading) !important; border-color: var(--jos-heading) !important;
    color: #fff !important;
}
.jw-conflict-actions button[data-action="replace"]:hover {
    filter: brightness(1.1);
}
@media (max-width: 600px) {
    .jw-conflict-actions { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
    .jw-conflict-actions button { width: 100%; text-align: center; }
    .jw-conflict-actions button[data-action="cancel"] { margin-right: 0; }
}

/* ==========================================================================
   SELECT CARET OVERRIDE (must come last for source-order specificity wins)
   Gives breathing room between select text and the down-caret. appearance:none
   + inline SVG caret positioned with background-position. Applies to all
   standard JOS selects; .jos-product-cta__select and .jw-panel-header-actions
   select opt out (they have their own styling).
   ========================================================================== */
select.jos-input,
select.jos-input-compact,
.jos-form select,
.jos-quote-form select,
.jos-wizard select,
.jos-table select,
.jos-matrix select,
.jos-roster-table select,
.jos-cart-edit-table select,
.jos-table td select,
.jos-matrix td select,
.jos-roster-table td select,
.jos-cart-edit-table td select,
.jos-cart-modal-body > div > select.jos-input,
.jw-panel-header-actions select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23595959' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 34px;
}
.jos-cart-edit-table select,
.jos-cart-edit-table td select { padding-right: 34px !important; }

/* Product page version picker */
.jos-pdp-version-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin-top: 6px;
}
.jos-pdp-version-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border: 2px solid #e0e0e0;
    border-radius: var(--jos-radius-sm, 4px);
    padding: 8px;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.jos-pdp-version-card input[type="radio"] {
    position: absolute;
    top: 6px;
    right: 6px;
}
.jos-pdp-version-card.selected,
.jos-pdp-version-card:hover {
    border-color: #0073aa;
    box-shadow: 0 2px 6px rgba(0,0,0,0.07);
}
.jos-pdp-version-card img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 3px;
    display: block;
}
.jos-pdp-version-card__noimg {
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    color: #999;
    font-size: 12px;
    border-radius: 3px;
}
.jos-pdp-version-card__label {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}
.jos-pdp-version-badge {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #856404;
    text-align: center;
}
.jos-pdp-version-card input[disabled] + img { opacity: 0.5; }

/* Cart row: subtle version suffix */
.jos-version-suffix { font-size: 0.9em; }

/* Block-cart item metadata: stack rows instead of inline " / " separators */
.wc-block-components-product-details > span {
    display: block;
    margin-bottom: 2px;
}
.wc-block-components-product-details > span > span[aria-hidden="true"] {
    display: none;
}
/* Match "Version:" size/weight with Team: / Players: (theme styles those at 15px) */
.wc-block-components-product-details__version {
    font-size: 15px;
}

/* ============================================================
 * MULTI-SLOT SIZE SELECTS (size profiles: top_bottom, etc.)
 * ============================================================ */
.jw-size-cell--multi .jw-size-slots,
.jos-ce-slots {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.jw-size-slot,
.jos-ce-slot {
    display: flex;
    align-items: center;
    gap: 6px;
}
.jw-size-slot-label,
.jos-ce-slot-label {
    font-size: 11px;
    color: #666;
    min-width: 60px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}
.jw-size-slot .jw-size-select,
.jos-ce-slot .jos-ce-size {
    flex: 1;
    min-width: 0;
}

/* ============================================================
 * SORTABLE TABLE COLUMNS (josEnableSort)
 * ============================================================ */
th.jos-sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 26px !important;
}
/* # and Jersey # columns override the narrow defaults from earlier rules
   (e.g. .jos-col-idx { width: 32px !important }) so the label + arrow fit. */
th.jos-col-idx.jos-sortable {
    width: 56px !important;
    min-width: 56px !important;
    padding-right: 22px !important;
}
th.jos-col-number.jos-sortable {
    width: 100px !important;
    min-width: 100px !important;
}
th.jos-sortable::after {
    content: '\2195'; /* up-down arrow */
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.15s ease;
}
th.jos-sortable:hover::after,
th.jos-sort-asc::after,
th.jos-sort-desc::after {
    color: #fff;
}
th.jos-sort-asc::after {
    content: '\25B2'; /* up triangle */
}
th.jos-sort-desc::after {
    content: '\25BC'; /* down triangle */
}


/* =============================================================================
   COACH / PARENT MODE TOGGLE — used in wizard Step 1 and on the PDP
   ========================================================================== */
.jos-mode-toggle { margin-bottom: var(--jos-space-lg); }
.jos-mode-toggle__label {
    font-family: var(--jos-font-heading);
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: block;
    margin-bottom: 6px;
    color: var(--jos-heading);
}
.jos-mode-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.jos-mode-options .jos-mode-btn,
.jos-mode-options .jos-mode-btn:hover,
.jos-mode-options .jos-mode-btn:focus,
.jos-mode-options .jos-mode-btn:active {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 10px 12px;
    border: 2px solid #e0e0e0;
    border-radius: var(--jos-radius-sm, 4px);
    background: #fff;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
    font-family: inherit;
    line-height: 1.3;
}
.jos-mode-options .jos-mode-btn:hover { border-color: #0073aa; background: #fff; }
.jos-mode-options .jos-mode-btn.is-active,
.jos-mode-options .jos-mode-btn.is-active:hover,
.jos-mode-options .jos-mode-btn.is-active:focus {
    border-color: #0073aa;
    background: #f0f8ff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.07);
}
.jos-mode-btn:focus-visible {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}
.jos-mode-btn__title {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--jos-heading);
}
.jos-mode-btn__sub {
    display: block;
    font-size: 12px;
    color: var(--jos-text-muted);
    margin-top: 2px;
}
@media (max-width: 480px) {
    .jos-mode-options { grid-template-columns: 1fr; }
}


/* =============================================================================
   EMPTY CART — custom CTA (overrides WC default cart-empty.php)
   ========================================================================== */
.jos-cart-empty {
    text-align: center;
    padding: var(--jos-space-xl) 20px;
    max-width: 600px;
    margin: var(--jos-space-lg) auto;
    background: rgba(128, 128, 128, 0.07);
    border: 1px solid var(--jos-border);
    border-radius: var(--jos-radius-lg);
}
.jos-cart-empty__title {
    font-family: var(--jos-font-heading);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--jos-heading);
    font-size: 32px;
    line-height: 1.1;
    margin: 0 0 var(--jos-space-sm);
}
.jos-cart-empty__desc {
    color: var(--jos-text-muted);
    font-size: 15px;
    line-height: 1.5;
    margin: 0 auto var(--jos-space-lg);
    max-width: 460px;
}
.jos-cart-empty__cta {
    display: inline-flex !important;
    width: auto !important;
    margin-top: 0 !important;
    max-width: 360px;
}

/* ==========================================================================
   Tom Select — scoped to JOS pickers (.jos-design-product + size selects)
   ========================================================================== */

/* Closed control — match .jos-input look */
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
    background: var(--jos-input-bg);
    border: 1px solid var(--jos-input-border-color);
    border-radius: var(--jos-input-radius);
    color: var(--jos-text);
    font-family: var(--jos-font-body);
    font-size: var(--jos-input-font-size);
    padding: var(--jos-input-padding);
    min-height: 0;
    box-shadow: none;
    cursor: pointer;
}

/* Placeholder text shown when no option is selected (controlInput is null,
   so we mirror the placeholder onto .ts-control via data-placeholder).
   Use :empty — with controlInput: null, an unselected control has zero
   children; a selected one contains an .item element. */
.ts-wrapper.single .ts-control:empty[data-placeholder]::before {
    content: attr(data-placeholder);
    color: var(--jos-text-faint);
    pointer-events: none;
}
.ts-wrapper.focus .ts-control,
.ts-wrapper.input-active .ts-control {
    border-color: var(--jos-primary);
    box-shadow: 0 0 0 3px var(--jos-primary-subtle);
    background: var(--jos-bg-white);
}
.ts-wrapper.single .ts-control > input {
    color: var(--jos-text);
}
.ts-wrapper .ts-control > .item {
    color: var(--jos-text);
}
.ts-wrapper .ts-control::after {
    /* Tom Select uses an ::after caret on single-select; recolor to muted text */
    border-top-color: var(--jos-text-muted) !important;
}

/* Dropdown panel */
.ts-dropdown {
    background: var(--jos-bg-white);
    border: 1px solid var(--jos-input-border-color);
    border-radius: var(--jos-input-radius);
    box-shadow: var(--jos-shadow-md);
    color: var(--jos-text);
    font-family: var(--jos-font-body);
    margin-top: 4px;
}
.ts-dropdown .ts-dropdown-content {
    max-height: 60vh;
}
.ts-dropdown [data-selectable],
.ts-dropdown .option {
    font-size: 15px;
    line-height: 1.4;
    padding: 10px 14px;
    color: var(--jos-text);
    cursor: pointer;
}
.ts-dropdown [data-selectable].active,
.ts-dropdown .active {
    background: var(--jos-primary-subtle);
    color: var(--jos-heading);
}
.ts-dropdown [data-selectable][aria-selected="true"],
.ts-dropdown .selected {
    background: var(--jos-primary);
    color: var(--jos-bg-white);
}
.ts-dropdown .optgroup-header {
    font-family: var(--jos-font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 12px;
    color: var(--jos-heading);
    background: var(--jos-bg-light);
    padding: 8px 14px;
    border-top: 1px solid var(--jos-border-light);
}
.ts-dropdown .optgroup:first-of-type .optgroup-header {
    border-top: 0;
}
.ts-dropdown .no-results,
.ts-dropdown .no_results {
    padding: 12px 14px;
    color: var(--jos-text-muted);
    font-style: italic;
}

/* Search input inside the dropdown (product picker only) */
.ts-dropdown .dropdown-input-wrap {
    padding: 8px;
    background: var(--jos-bg-light);
    border-bottom: 1px solid var(--jos-border-light);
}
.ts-dropdown .dropdown-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--jos-input-border-color);
    border-radius: var(--jos-input-radius);
    font-size: 14px;
    background: var(--jos-bg-white);
    color: var(--jos-text);
}

/* Compact variant for size pickers (in tight table cells) */
.jos-rp-size + .ts-wrapper .ts-control,
.jos-ce-size + .ts-wrapper .ts-control,
.jos-re-size + .ts-wrapper .ts-control,
.jw-np-size + .ts-wrapper .ts-control {
    padding: var(--jos-input-compact-padding);
    font-size: var(--jos-input-compact-font-size);
}

/* On mobile, bump the dropdown option font for legibility (this is the whole point) */
@media (max-width: 768px) {
    .ts-dropdown [data-selectable],
    .ts-dropdown .option {
        font-size: 16px;
        padding: 12px 14px;
    }
    .ts-dropdown .optgroup-header {
        font-size: 13px;
        padding: 10px 14px;
    }
}

/* ==========================================================================
   Roster tables — stack-as-cards on mobile (≤ 600px)

   Covers:
     #jw-new-player-table  — wizard step 1 new-player entry (.jos-matrix)
     .jos-roster-table     — my-teams "Edit Roster" table
     .jos-cart-edit-table  — product-page roster table + cart-edit modal

   All three share the same column class names (.jos-col-idx / -jersey /
   -number / -size / -remove) so a single rule set drives the layout.
   ========================================================================== */
@media (max-width: 600px) {
    /* Disable the horizontal-scroll fallbacks that wrap each table. Width is
       forced to 100% (auto) to override `.jos-pdp-table-scroll` desktop's
       calc(100% + 2 * --jos-space-lg) negative-margin bleed. */
    .jw-table-scroll-wrap:has(#jw-new-player-table),
    .jos-roster-table-wrap,
    .jos-pdp-table-scroll,
    .jw-matrix-scroll,
    .jos-cart-modal .jos-cart-modal-body {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        /* Override both axes — the spec forces `overflow-x: visible` to be
           treated as `auto` whenever `overflow-y` is anything else, and the
           desktop rule sets `overflow: hidden`. */
        overflow: visible !important;
    }

    /* Table-level reset. !important is required to beat the desktop
       horizontal-scroll fallback rules that set min-width: 420–520px on each
       table and the matrix product/jersey/number min-widths. */
    .jos-matrix,
    .jos-roster-table,
    .jos-cart-edit-table,
    .jos-pdp-table-scroll .jos-cart-edit-table,
    .jos-cart-modal .jos-cart-edit-table {
        min-width: 0 !important;
        width: 100% !important;
        border: 0;
    }
    .jos-pdp-table-scroll .jos-cart-edit-table .jos-col-jersey,
    .jos-matrix .jos-col-jersey,
    .jos-matrix .jos-col-number,
    .jos-matrix .product-header { min-width: 0 !important; }

    /* The cart modal has two desktop "bleed" rules that pull the table out
       of the modal body via negative margins + extra width. Cancel both. */
    .jos-cart-modal .jos-cart-modal .jos-cart-edit-table,
    .jos-cart-modal .jos-cart-edit-table {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* The cart modal forces .jos-cart-player-row back to `display: table-row`
       on desktop, which would break our card grid. Force grid here. */
    .jos-cart-modal .jos-cart-edit-table tbody > tr.jos-cart-player-row,
    .jos-cart-modal .jos-cart-edit-table tbody > tr {
        display: grid !important;
    }
    .jos-matrix thead,
    .jos-roster-table thead,
    .jos-cart-edit-table thead { display: none; }
    .jos-matrix,
    .jos-matrix tbody,
    .jos-roster-table,
    .jos-roster-table tbody,
    .jos-cart-edit-table,
    .jos-cart-edit-table tbody { display: block; }

    /* Tight up the surrounding section padding so the cards actually have
       room to breathe inside narrow containers. */
    .jos-team-section,
    .jos-rosters-section { padding: 12px !important; }

    /* Wizard step 1 player panel — the right column (.jw-step1-right) has
       no horizontal padding by default, so the player cards inside run
       edge-to-edge in both manual entry and "created a roster" modes. Match
       the visual inset of the my-teams roster cards. */
    .jw-step1-right { padding: 12px !important; }
    .jw-step1-right .jw-players-header,
    .jw-step1-right #jw-player-entry-mode > p { padding-left: 0 !important; padding-right: 0 !important; }

    /* Give the roster title row room from the edit panel below it. */
    .jos-roster-section h5 { margin-bottom: 12px !important; }

    /* Action-buttons strip below each roster card — stack as one button per
       row at full width. The base mobile rule is a 2-column grid which leaves
       an orphaned last button. */
    .jos-roster-actions {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 12px !important;
    }
    .jos-roster-actions button {
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
    }

    /* Each <tr> becomes a 2-column grid card. Inputs flow into named slots
       below; any remaining size fields drop onto their own row. */
    .jos-matrix tbody > tr,
    .jos-roster-table tbody > tr,
    .jos-cart-edit-table tbody > tr {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 90px;
        column-gap: 10px;
        row-gap: 12px;
        border: 1px solid var(--jos-border) !important;
        padding: 32px 10px 12px;
        margin: 0 0 10px;
        background: var(--jos-input-bg) !important;
    }

    /* Suppress zebra/hover backgrounds and cell borders inside cards, and
       force td width to fill its grid track (the base CSS sets fixed pixel
       widths on .jos-col-number / .jos-col-size that we need to override).
       Explicit :nth-child variants are needed for .jos-roster-table because
       its desktop zebra rule has higher specificity than a plain `> td`. The
       .jos-pdp-table-scroll variant beats the desktop `td { padding: 6px 8px
       !important }` which would otherwise leave too much horizontal gap
       between columns in the card. */
    .jos-matrix tbody > tr > td,
    .jos-roster-table tbody > tr > td,
    .jos-roster-table tbody > tr:nth-child(odd) > td,
    .jos-roster-table tbody > tr:nth-child(even) > td,
    .jos-cart-edit-table tbody > tr > td,
    .jos-pdp-table-scroll .jos-cart-edit-table tbody > tr > td,
    .jos-cart-modal .jos-cart-edit-table tbody > tr > td {
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        min-width: 0;
        text-align: left;
    }
    .jos-matrix tbody > tr:hover > td,
    .jos-roster-table tbody > tr:hover > td,
    .jos-cart-edit-table tbody > tr:hover > td { background: transparent !important; }

    /* Darker header strip at the top of each card (holds # and ×) */
    .jos-matrix tbody > tr::before,
    .jos-roster-table tbody > tr::before,
    .jos-cart-edit-table tbody > tr::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 26px;
        background: var(--jos-bg-medium);
        pointer-events: none;
    }

    /* Grid slot assignments */
    .jos-matrix td.jos-col-jersey,
    .jos-roster-table td.jos-col-jersey,
    .jos-cart-edit-table td.jos-col-jersey { grid-column: 1; }
    .jos-matrix td.jos-col-number,
    .jos-roster-table td.jos-col-number,
    .jos-cart-edit-table td.jos-col-number { grid-column: 2; }
    .jos-matrix td.jos-col-size,
    .jos-roster-table td.jos-col-size,
    .jos-cart-edit-table td.jos-col-size { grid-column: 1 / -1; }

    /* Row number badge — vertically centered in the 26px header strip,
       flush-left at 12px. Width must be auto (the general td reset above
       sets width:100% which we override here). */
    .jos-matrix td.jos-col-idx,
    .jos-roster-table td.jos-col-idx,
    .jos-cart-edit-table td.jos-col-idx {
        position: absolute;
        top: 0;
        left: 12px;
        height: 26px;
        width: auto !important;
        padding: 0 !important;
        display: flex;
        align-items: center;
        text-align: left !important;
        font-size: 12px;
        font-weight: 700;
        color: var(--jos-text-muted);
        letter-spacing: 0.3px;
        line-height: 1;
    }
    .jos-matrix td.jos-col-idx::before,
    .jos-roster-table td.jos-col-idx::before,
    .jos-cart-edit-table td.jos-col-idx::before {
        content: "#";
        opacity: 0.6;
        margin-right: 2px;
    }

    /* Remove button — vertically centered, flush-right at 4px. Same width
       override as above, plus right-align text inside so the button hugs
       the right edge. */
    .jos-matrix td.jos-col-remove,
    .jos-roster-table td.jos-col-remove,
    .jos-cart-edit-table td.jos-col-remove {
        position: absolute;
        top: 0;
        right: 4px;
        height: 26px;
        width: auto !important;
        padding: 0 !important;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        text-align: right !important;
    }

    /* Field labels driven by column class — picked up automatically by
       dynamically-added rows because the JS keeps the same class names. */
    .jos-matrix td.jos-col-jersey::before,
    .jos-roster-table td.jos-col-jersey::before,
    .jos-cart-edit-table td.jos-col-jersey::before { content: "Name on Jersey"; }
    .jos-matrix td.jos-col-number::before,
    .jos-roster-table td.jos-col-number::before,
    .jos-cart-edit-table td.jos-col-number::before { content: "Jersey #"; }
    .jos-matrix td.jos-col-size::before,
    .jos-roster-table td.jos-col-size::before { content: "Default Size"; }
    .jos-cart-edit-table td.jos-col-size::before { content: "Size"; }
    .jos-matrix td.jos-col-jersey::before,
    .jos-roster-table td.jos-col-jersey::before,
    .jos-cart-edit-table td.jos-col-jersey::before,
    .jos-matrix td.jos-col-number::before,
    .jos-roster-table td.jos-col-number::before,
    .jos-cart-edit-table td.jos-col-number::before,
    .jos-matrix td.jos-col-size::before,
    .jos-roster-table td.jos-col-size::before,
    .jos-cart-edit-table td.jos-col-size::before {
        display: block;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--jos-text-muted);
        margin-bottom: 4px;
    }

    /* Full-width form controls in stacked layout */
    .jos-matrix td input[type="text"],
    .jos-roster-table td input[type="text"],
    .jos-cart-edit-table td input[type="text"] {
        width: 100%;
        box-sizing: border-box;
    }
    .jos-matrix td .ts-wrapper,
    .jos-roster-table td .ts-wrapper,
    .jos-cart-edit-table td .ts-wrapper { width: 100%; }

    /* ------------------------------------------------------------------
       Wizard step 3 — size matrix (.jos-matrix .jw-size-cell)
       Each size cell lives on its own row inside the player card and shows
       the product name above its size dropdown(s).
       ------------------------------------------------------------------ */
    .jos-matrix td.jw-size-cell {
        grid-column: 1 / -1;
        min-width: 0 !important;
    }
    .jos-matrix td.jw-size-cell::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--jos-text-muted);
        margin-bottom: 4px;
        white-space: normal;
    }
    /* Override desktop's `.jos-matrix--single .jw-size-select { max-width: 300px;
       display: inline-block }` so the dropdown fills the card. */
    .jos-matrix td.jw-size-cell .jw-size-select {
        max-width: none !important;
        display: block !important;
        width: 100%;
    }
    /* Multi-slot size cells (Top + Bottom etc.): stack slot label + select
       vertically inside the card. */
    .jos-matrix td.jw-size-cell .jw-size-slots {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .jos-matrix td.jw-size-cell .jw-size-slot {
        display: grid;
        grid-template-columns: 70px 1fr;
        align-items: center;
        gap: 8px;
    }
    .jos-matrix td.jw-size-cell .jw-size-slot-label {
        font-size: 12px;
        color: var(--jos-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.3px;
        font-weight: 600;
    }
}