/* Race Jersey (our-product) page styles — extracted from template for maintainability. */
/* ── Hero ── */
    .crj-hero {
        position: relative;
        background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
        color: #fff;
        padding: 5rem 0 4rem;
        text-align: center;
        overflow: hidden;
    }
    .crj-hero::before {
        content: '';
        position: absolute; inset: 0;
        background: repeating-linear-gradient(90deg,transparent,transparent 48px,rgba(255,255,255,0.02) 48px,rgba(255,255,255,0.02) 49px);
    }
    .crj-hero * { position: relative; }
    .crj-hero h1 { font-size:2.5rem; font-weight:800; margin:0 0 0.5rem; letter-spacing:-0.02em; }
    .crj-hero h1 .acc { color:#e53935; }
    .crj-hero .tagline { font-size:1.1rem; color:rgba(255,255,255,0.65); max-width:540px; margin:0 auto 1.5rem; line-height:1.6; }
    .crj-hero .price-badge {
        display:inline-flex; align-items:baseline; gap:0.4rem;
        background:rgba(229,57,53,0.15); border:1px solid rgba(229,57,53,0.3);
        padding:0.5rem 1.25rem; border-radius:30px; margin-bottom:2rem;
    }
    .crj-hero .price-badge .from { font-size:0.75rem; color:rgba(255,255,255,0.6); text-transform:uppercase; letter-spacing:0.08em; }
    .crj-hero .price-badge .amount { font-size:1.6rem; font-weight:800; color:#fff; }
    .crj-hero .price-badge .per { font-size:0.8rem; color:rgba(255,255,255,0.5); }

    /* ── Product Showcase ── */
    .crj-showcase {
        display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
        padding: 4rem 0;
    }
    .crj-design-frame {
        aspect-ratio: 3/4; border-radius:16px; overflow:hidden;
        background: linear-gradient(145deg, #111 0%, #1e1e2f 100%);
        display:flex; align-items:center; justify-content:center;
        border: 1px solid rgba(255,255,255,0.06);
        position: relative;
    }
    .crj-design-frame img {
        width:100%; height:100%; object-fit:cover; display:none;
        transition: opacity 0.3s ease;
    }
    .crj-design-frame img.active { display:block; }
    .crj-design-frame .placeholder-text {
        color:rgba(255,255,255,0.2); font-size:0.8rem; text-transform:uppercase;
        letter-spacing:0.12em; text-align:center; padding:2rem;
    }
    .crj-design-frame .placeholder-text span { display:block; font-size:2.5rem; margin-bottom:0.75rem; }
    .crj-design-frame .placeholder-text.hidden { display:none; }
    .crj-info h2 { font-size:1.6rem; font-weight:800; margin:0 0 0.75rem; color:var(--color-text,#1a1a1a); }
    .crj-info p { font-size:0.95rem; color:var(--color-muted,#555); line-height:1.7; margin:0 0 1.25rem; }
    .crj-info ul { list-style:none; padding:0; margin:0 0 1.5rem; }
    .crj-info ul li {
        padding:0.45rem 0; font-size:0.9rem; color:var(--color-text,#1a1a1a);
        display:flex; align-items:center; gap:0.5rem;
    }
    .crj-info ul li .check { color:#2e7d32; font-weight:700; flex-shrink:0; }

    /* ── Colour Picker ── */
    .crj-section { padding:3rem 0; }
    .crj-section-title {
        font-size:1.3rem; font-weight:700; margin:0 0 0.4rem; color:var(--color-text,#1a1a1a);
    }
    .crj-section-desc { font-size:0.9rem; color:var(--color-muted,#666); margin:0 0 1.5rem; }
    .crj-colors { display:flex; flex-wrap:wrap; gap:0.75rem; margin-bottom:1rem; }
    .crj-swatch {
        width:48px; height:48px; border-radius:50%; border:3px solid transparent;
        cursor:pointer; transition:border-color 0.15s, transform 0.15s;
        position:relative;
    }
    .crj-swatch:hover { transform:scale(1.1); }
    .crj-swatch.selected { border-color:var(--color-text,#1a1a1a); }
    .crj-swatch::after {
        content:''; position:absolute; inset:3px; border-radius:50%;
        border:2px solid rgba(255,255,255,0.3);
    }
    .crj-color-red { background:#e53935; }
    .crj-color-blue { background:#1565c0; }
    .crj-color-black { background:#1a1a1a; }
    .crj-color-white { background:#f5f5f5; border-color:#ddd; }
    .crj-color-white.selected { border-color:#1a1a1a; }
    .crj-color-white::after { border-color:rgba(0,0,0,0.1); }
    .crj-color-yellow { background:#fdd835; }
    .crj-color-green { background:#2e7d32; }
    .crj-custom-color {
        display:inline-flex; align-items:center; gap:0.4rem;
        padding:0.5rem 1rem; border-radius:24px; font-size:0.82rem; font-weight:600;
        border:2px dashed var(--color-border,#ccc); color:var(--color-muted,#666);
        cursor:pointer; transition:all 0.15s; background:transparent;
    }
    .crj-custom-color:hover { border-color:var(--color-text,#1a1a1a); color:var(--color-text,#1a1a1a); }
    .crj-selected-label {
        font-size:0.82rem; color:var(--color-muted,#888); margin-top:0.75rem;
    }
    .crj-selected-label strong { color:var(--color-text,#1a1a1a); }

    /* ── Customisation Options ── */
    .crj-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem; }
    .crj-option {
        border:1px solid var(--color-border,#e0e0e0); border-radius:12px;
        padding:1.5rem; background:var(--color-bg,#fff);
        transition:box-shadow 0.2s;
    }
    .crj-option:hover { box-shadow:0 4px 16px rgba(0,0,0,0.06); }
    .crj-option-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.75rem; }
    .crj-option-header h3 { font-size:1rem; font-weight:700; margin:0; color:var(--color-text,#1a1a1a); }
    .crj-option-price {
        font-size:0.82rem; font-weight:700; padding:0.25rem 0.7rem;
        border-radius:20px; white-space:nowrap;
    }
    .crj-price-included { background:rgba(46,125,50,0.1); color:#2e7d32; }
    .crj-price-extra { background:rgba(229,57,53,0.1); color:#e53935; }
    .crj-price-free { background:rgba(46,125,50,0.1); color:#2e7d32; }
    .crj-price-contact { background:rgba(25,118,210,0.1); color:#1565c0; }
    .crj-option p { font-size:0.88rem; color:var(--color-muted,#666); line-height:1.6; margin:0; }
    .crj-option .note {
        display:block; margin-top:0.75rem; padding:0.65rem 0.85rem;
        background:var(--color-light,#f8f8f8); border-radius:8px;
        font-size:0.8rem; color:var(--color-muted,#777); line-height:1.5;
    }
    .crj-option .note a { color:#1565c0; text-decoration:underline; }

    /* ── Pricing Table ── */
    .crj-pricing {
        max-width:560px; margin:0 auto; padding:3rem 0;
    }
    .crj-pricing-table {
        width:100%; border-collapse:collapse;
    }
    .crj-pricing-table tr { border-bottom:1px solid var(--color-border,#e8e8e8); }
    .crj-pricing-table tr:last-child { border-bottom:none; }
    .crj-pricing-table td { padding:0.85rem 0; font-size:0.92rem; color:var(--color-text,#1a1a1a); }
    .crj-pricing-table td:last-child { text-align:right; font-weight:600; white-space:nowrap; }
    .crj-pricing-table .row-total td { font-weight:700; font-size:1.05rem; border-top:2px solid var(--color-text,#1a1a1a); padding-top:1rem; }
    .crj-pricing-table .muted { color:var(--color-muted,#999); font-weight:400; font-size:0.85rem; }

    /* ── CTA ── */
    .crj-cta {
        text-align:center; padding:4rem 0;
        background:var(--color-light,#f5f5f5);
    }
    .crj-cta h2 { font-size:1.5rem; font-weight:800; margin:0 0 0.5rem; }
    .crj-cta p { font-size:0.95rem; color:var(--color-muted,#666); margin:0 0 2rem; max-width:480px; margin-left:auto; margin-right:auto; }
    .crj-btns { display:flex; gap:0.75rem; justify-content:center; flex-wrap:wrap; }
    .crj-btn-wa {
        display:inline-flex; align-items:center; gap:0.5rem;
        background:#25D366; color:#fff; padding:0.85rem 2rem; border-radius:8px;
        text-decoration:none; font-weight:600; font-size:0.95rem;
        transition:background 0.2s, transform 0.15s;
    }
    .crj-btn-wa:hover { background:#1ebe5d; transform:translateY(-1px); }
    .crj-btn-contact {
        display:inline-flex; align-items:center; gap:0.5rem;
        background:#1a1a1a; color:#fff; padding:0.85rem 2rem; border-radius:8px;
        text-decoration:none; font-weight:600; font-size:0.95rem;
        transition:background 0.2s, transform 0.15s;
    }
    .crj-btn-contact:hover { background:#333; transform:translateY(-1px); }

    /* ── Responsive ── */
    @media (max-width:768px) {
        .crj-hero h1 { font-size:1.8rem; }
        .crj-showcase { grid-template-columns:1fr; gap:2rem; padding:2rem 0; }
        .crj-design-frame { max-width:400px; margin:0 auto; }
        .crj-options { grid-template-columns:1fr; }
    }