/* CraftBox 3D print page styles (extracted from views/service/3dprint.php) */

    :root {
        /* Brand Colors */
        --primary: #5A9E89;
        --primary-dark: #46856e;
        --accent: #F99F1B;
        --light-bg: #BCDBC3;

        /* UI Colors */
        --white: #ffffff;
        --gray-100: #f3f4f6;
        --gray-200: #e5e7eb;
        --gray-500: #6b7280;
        --gray-800: #1f2937;

        --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
        --radius: 12px;
    }

    .d-container {
          margin: 2rem auto;
          padding: 0 1.5rem;
          display: grid;
          grid-template-columns: 1fr minmax(300px, 380px);
          gap: 2rem;
          align-items: start;
          overflow: visible;
    }

    @media screen and (max-width: 1200px) {
        .d-container { grid-template-columns: 1fr minmax(280px, 340px); }
    }
    @media screen and (max-width: 900px) {
        .d-container { grid-template-columns: 1fr; }
    }

    .s-title-accent{font-style:normal;color:#000;font-size:28px;margin-bottom:1.1em;text-align:center;}
    @media screen and (min-width:48em){
        .s-title{font-size:28px;}
        .s-title-accent{font-size:36px;}
    }

    .lc-page-description{margin:1.8em 0;font-size:20px;font-weight:400;text-align: center}

    .left-col {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    /* Cards */
    .card {
        background: var(--white);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        border: 1px solid var(--light-bg);
        overflow: hidden;
    }
    .viewer-card { overflow: hidden; }

    /* 3D Viewer */
    .viewer-card {
        min-height: 400px;
        max-height: 65vh;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .viewer-header {
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--gray-200);
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
    }

    .viewer-title {
        font-weight: 600;
        color: var(--gray-800);
        font-size: 1rem;
    }

    #canvas-container {
        flex-grow: 1;
        background: radial-gradient(circle, #f1f5f9 0%, #e2e8f0 100%);
        position: relative;
        cursor: grab;
        width: 100%;
        min-height: 480px;
        overflow: hidden;
    }

    #canvas-container:active { cursor: grabbing; }

    /* Controls Overlay */
    .viewer-controls {
        position: absolute;
        bottom: 1.5rem;
        right: 1.5rem;
        display: flex;
        gap: 0.5rem;
        background: rgba(255, 255, 255, 0.9);
        padding: 0.5rem;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        border: 1px solid var(--gray-200);
        z-index: 10;
    }

    .control-btn {
        background: var(--white);
        border: 1px solid var(--gray-200);
        color: var(--gray-800);
        width: 36px;
        height: 36px;
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }

    .control-btn:hover { background: var(--gray-100); color: var(--primary); }
    .control-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
    .control-btn.remove-btn:hover { background: #ef4444; color: white; border-color: #ef4444; }

    @media (max-width: 500px) {
        .viewer-controls { right: 0.5rem; bottom: 0.5rem; padding: 0.35rem; gap: 0.35rem; }
        .control-btn { width: 30px; height: 30px; font-size: 0.8rem; }
    }

    /* Upload Overlay */
    .upload-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(2px);
        z-index: 20;
        transition: opacity 0.3s ease;
    }

    .upload-overlay.hidden { opacity: 0; pointer-events: none; }

    .upload-box {
        border: 2px dashed var(--primary);
        background: rgba(90, 158, 137, 0.05);
        border-radius: var(--radius);
        padding: 3rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s ease;
        max-width: 80%;
    }

    .upload-box:hover { background: rgba(90, 158, 137, 0.1); transform: scale(1.01); }
    .upload-icon { font-size: 3rem; color: var(--primary); margin-bottom: 1rem; }
    #file-input { display: none; }

    /* Processing Overlay */
    .processing-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(2px);
        z-index: 21;
        transition: opacity 0.3s ease;
    }
    .processing-overlay.hidden { opacity: 0; pointer-events: none; }

    .processing-box {
        text-align: center;
        padding: 2rem;
        max-width: 80%;
    }
    .processing-box h3 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
        color: var(--gray-800);
    }
    .processing-box p {
        color: var(--gray-500);
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }

    .processing-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid var(--gray-200);
        border-top-color: var(--primary);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        margin: 0 auto 1rem;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .progress-bar-container {
        width: 100%;
        max-width: 280px;
        height: 6px;
        background: var(--gray-200);
        border-radius: 3px;
        overflow: hidden;
        margin: 0 auto 0.5rem;
    }
    .progress-bar {
        height: 100%;
        width: 0%;
        background: var(--primary);
        border-radius: 3px;
        transition: width 0.15s ease;
    }
    .progress-percent {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--primary);
        margin: 0;
    }

    /* Help Trigger & Popup */
    .help-wrap { position: relative; flex-shrink: 0; }
    .help-trigger {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.4rem;
        cursor: pointer;
        color: var(--gray-500);
        font-size: 0.85rem;
        font-weight: 500;
        transition: color 0.2s;
        user-select: none;
        flex-shrink: 0;
        background: none;
        border: 0;
        padding: 0;
        font-family: inherit;
    }
    .help-trigger:hover, .help-trigger.active { color: #3f6f5e; }

    .help-popup {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        width: 340px;
        background: var(--white);
        border-radius: var(--radius);
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        border: 1px solid var(--gray-200);
        border-left: 4px solid var(--accent);
        padding: 1.25rem;
        z-index: 100;
        font-size: 0.85rem;
    }
    .help-wrap:hover .help-popup,
    .help-trigger.active + .help-popup { display: block; }

    .help-popup h3 {
        font-size: 0.9rem;
        font-weight: 700;
        color: #3f6f5e;
        margin: 0.75rem 0 0.5rem;
    }
    .help-popup h3:first-child { margin-top: 0; }
    .help-popup ul { list-style: none; padding: 0; margin: 0; }
    .help-popup li {
        padding-left: 1.2rem;
        position: relative;
        margin-bottom: 0.4rem;
        line-height: 1.5;
        color: var(--gray-800);
    }
    .help-popup li::before {
        content: '\2022';
        position: absolute;
        left: 0;
        color: var(--accent);
        font-weight: bold;
    }

    @media (max-width: 500px) {
        .help-popup { width: calc(100vw - 3rem); right: -1rem; }
    }

    .warning-box {
        padding: 0.5rem 1.5rem;
        background-color: #fff;
        border-left: 6px solid #C12E1F;
        font-size: 1.0rem;
        color: var(--gray-800);
    }
    .warning-box h3 {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 0.75rem;
        margin-top: 1rem;
        color: #C12E1F;
    }
    .warning-box h3:first-child { margin-top: 0; }

    .warning-box ul {
        list-style: none;
        padding-left: 0;
        margin-bottom: 0;
    }
    .warning-box li {
        margin-bottom: 0.75rem;
        line-height: 1.5;
        position: relative;
        padding-left: 1.5rem;
    }
    .warning-box li::before {
        content: '•';
        position: absolute;
        left: 0;
        color: #C12E1F;
        font-weight: bold;
        font-size: 1.2em;
        line-height: 1;
        top: 2px;
    }

    /* Right Column Config */
    .config-panel { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: calc(80px + 1.5rem); align-self: start; z-index: 20; }
    html, body { overflow-x: clip; }
    /* Ensure sticky works in Safari - override global overflow-x:hidden */
    @supports not (overflow: clip) {
        html, body { overflow-x: visible; }
    }
    @media screen and (max-width: 900px) {
        .config-panel { position: static; top: auto; }
    }

    .panel-content { padding: 1.5rem; }

    /* Grid Layouts for Options */
    .option-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .option-card, .option-cardk {
        border: 1px solid var(--gray-200);
        border-radius: 8px;
        padding: 0.75rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s;
        background: white;
    }

    .option-card:hover, .option-cardk:hover { border-color: var(--primary); }

    .option-card.selected, .option-cardk.selected {
        border-color: var(--primary);
        background-color: rgba(90, 158, 137, 0.08);
        box-shadow: 0 0 0 1px var(--primary) inset;
    }

    .opt-name { font-weight: 600; font-size: 0.9rem; color: var(--gray-800); }
    .opt-desc { font-size: 0.75rem; color: var(--gray-500); }

    /* Settings Row - side by side form groups */
    .settings-row { display: flex; gap: 0; }
    .settings-row > * { flex: 1; min-width: 0; }
    .settings-row > .form-group:first-child { border-right: 1px solid var(--gray-200); padding-right: 1rem; margin-right: 1rem; }
    @media (max-width: 600px) {
        .settings-row { flex-direction: column; gap: 1.5rem; }
        .settings-row .option-grid { grid-template-columns: 1fr; }
        .panel-content { padding: 1rem; }
        .settings-row > .form-group:first-child { border-right: none; border-bottom: 1px solid var(--gray-200); padding-right: 0; margin-right: 0; padding-bottom: 1.5rem; margin-bottom: 0; }
    }

    /* Header Quantity */
    .header-qty { display: flex; align-items: center; gap: 0.5rem; }
    .header-qty label { font-size: 0.8rem; color: var(--gray-500); margin: 0; white-space: nowrap; }
    .qty-stepper { display: flex; align-items: center; border: 1px solid var(--gray-200); border-radius: 8px; overflow: hidden; background: white; }
    .qty-inline { width: 50px; padding: 0.35rem 0.25rem; border: none; border-left: 1px solid var(--gray-200); border-right: 1px solid var(--gray-200); border-radius: 0; font-size: 0.9rem; font-weight: 600; text-align: center; color: var(--gray-800); -moz-appearance: textfield; }
    .qty-inline::-webkit-outer-spin-button, .qty-inline::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .qty-inline:focus { outline: none; box-shadow: 0 0 0 2px rgba(90,158,137,0.15) inset; }
    .qty-btn { width: 28px; height: 30px; border: none; background: white; color: var(--gray-800); font-size: 1rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; user-select: none; }
    .qty-btn:hover { background: var(--gray-100); color: var(--primary); }
    .qty-btn:active { background: rgba(90,158,137,0.12); }

    /* Range Slider — модернен "pill" слайдър в дизайна на сайта.
       Лентата е самият input (8px, напълно заоблен), фонът се задава от JS (updateSliderFill).
       Дръжката е невидима - позицията се четe от ръба на запълването. */
    .slider-track {
        position: relative;
        height: 20px;
        display: flex;
        align-items: center;
    }
    .slider-track input[type=range] {
        -webkit-appearance: none;
        appearance: none;
        position: relative;
        z-index: 2;
        width: 100%;
        height: 8px;
        border-radius: 999px;
        background: linear-gradient(to right, var(--primary) 50%, var(--gray-200) 50%);
        outline: none;
        cursor: pointer;
        margin: 0;
    }
    .slider-track input[type=range]::-webkit-slider-runnable-track {
        -webkit-appearance: none;
        appearance: none;
        height: 8px;
        background: transparent;
        border: none;
        border-radius: 999px;
    }
    .slider-track input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 18px; height: 8px;
        border-radius: 999px;
        background: transparent;
        border: none;
        box-shadow: none;
        cursor: pointer;
        margin-top: 0;
        opacity: 0;
    }
    .slider-track input[type=range]::-moz-range-track {
        height: 8px;
        background: transparent;
        border-radius: 999px;
        border: none;
    }
    .slider-track input[type=range]::-moz-range-progress {
        height: 8px;
        background: transparent;
        border-radius: 999px;
    }
    .slider-track input[type=range]::-moz-range-thumb {
        width: 12px; height: 8px;
        border-radius: 999px;
        background: transparent;
        border: none;
        box-shadow: none;
        opacity: 0;
    }
    /* Standalone slider blocks get breathing room; inline ones control their own margins */
    form .form-group > .slider-track { margin: 0.75rem 0; }
    .range-wrapper { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; }
    .range-val { font-weight: 700; color: var(--primary-dark); font-size: 0.85rem; min-width: 2.4rem; text-align: right; }

    /* Floating object labels (CSS2D overlay) */
    .label-overlay { z-index: 5; }
    .part-select { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
    .part-select input[type="checkbox"] { accent-color: var(--primary); width: 15px; height: 15px; cursor: pointer; }
    .part-item.deselected { opacity: 0.5; }
    .part-item.deselected .part-name { text-decoration: line-through; color: var(--gray-500); }
    .obj-label {
        background: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: 8px;
        padding: 0.25rem 0.6rem 0.25rem 1.1rem;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--gray-800);
        box-shadow: var(--shadow);
        white-space: nowrap;
        position: relative;
        transition: border-color 0.15s, color 0.15s, transform 0.15s;
        user-select: none;
    }
    .obj-label::before {
        content: '\2022';
        position: absolute;
        left: 0.45rem;
        top: 50%;
        transform: translateY(-55%);
        color: var(--primary);
        font-weight: bold;
    }
    .obj-label.active {
        border-color: var(--accent);
        color: var(--primary-dark);
        transform: scale(1.08);
    }

    /* Color Picker */
    .color-options { display: flex; gap: 0.75rem; flex-wrap: wrap; }
    .color-option {
        width: 30px; height: 30px;
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid transparent;
        transition: transform 0.2s;
    }
    /* Specific fix for border colors from backup */
    .color-option.border { border: 1px solid #ccc; }

    .color-option.selected {
        border-color: var(--gray-800);
        transform: scale(1.15);
    }

    /* Scale Presets */
    .scale-presets {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
        flex-wrap: wrap;
    }
    .scale-btn {
        border: 1px solid var(--gray-200);
        border-radius: 6px;
        padding: 0.35rem 0.75rem;
        background: white;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--gray-800);
        cursor: pointer;
        transition: all 0.2s;
    }
    .scale-btn:hover { border-color: var(--primary); }
    .scale-btn.selected {
        border-color: var(--primary);
        background: rgba(90, 158, 137, 0.08);
        color: var(--primary);
    }

    /* Parts List - per-object scale */
    .parts-section { margin-bottom: 0.5rem; }
    .parts-section > label { font-size: 0.9rem; font-weight: 600; color: var(--gray-800); display: block; margin-bottom: 0.5rem; }
    .parts-list { display: flex; flex-direction: column; gap: 0.5rem; }
    .part-item {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        padding: 0.65rem 0.75rem;
        border: 1px solid var(--gray-200);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 0.85rem;
        background: white;
    }
    .part-item:hover { border-color: var(--primary); background: rgba(90,158,137,0.04); }
    .part-item.selected { border-color: var(--primary); background: rgba(90,158,137,0.08); box-shadow: 0 0 0 1px var(--primary) inset; }
    .part-item.highlighted { border-color: var(--accent); background: rgba(249,159,27,0.06); }
    .part-header {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        flex-wrap: nowrap;
    }
    .part-name { font-weight: 600; color: var(--gray-800); white-space: nowrap; }
    .part-dims { font-size: 0.75rem; color: var(--gray-500); white-space: nowrap; }
    .part-item-all .part-header { justify-content: flex-start; }
    .part-item-all .part-name { font-style: italic; }

    /* Summary */
    .summary-list { font-size: 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; }
    .summary-item {
        display: flex;
        justify-content: space-between;
        padding-bottom: 0.5rem;
        border-bottom: 1px dashed var(--gray-200);
    }
    .summary-item span:last-child { font-weight: 600; color: var(--gray-800); }

    /* Price & Submit */
    .price-section {
        margin-top: auto;
        padding-top: 1.5rem;
    }

    .total-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 1.5rem;
    }
    .total-label { font-size: 1rem; color: var(--gray-500); }
    .total-amount { font-size: 2rem; font-weight: 800; color: var(--primary); }

    .btn-submit {
        width: 100%;
        background-color: var(--accent);
        color: white;
        border: none;
        padding: 1rem;
        font-size: 1.1rem;
        font-weight: 700;
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.2s;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        box-shadow: 0 4px 12px rgba(249, 159, 27, 0.3);
    }
    .btn-submit:hover { background-color: #e08e15; }
    .btn-submit:disabled { background-color: var(--gray-200); color: var(--gray-500); cursor: not-allowed; box-shadow: none; }

    /* Toast */
    .toast {
        position: fixed;
        bottom: 2rem; right: 2rem;
        background: var(--gray-800);
        color: white;
        padding: 1rem 1.5rem;
        border-radius: 8px;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        transform: translateY(150%);
        transition: transform 0.3s ease-out;
        z-index: 1000;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .toast.show { transform: translateY(0); }
    .toast.success { border-left: 4px solid var(--primary); }
    .toast.warning { border-left: 4px solid var(--accent); }
    .toast.error { border-left: 4px solid #ef4444; }

    /* Потвърждение при модел над лимита на плочата */
    .confirm-modal {
        position: fixed;
        inset: 0;
        z-index: 2000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        background: rgba(15, 23, 42, 0.45);
        backdrop-filter: blur(2px);
    }
    .confirm-modal.hidden { display: none; }
    .confirm-box {
        width: 100%;
        max-width: 430px;
        background: var(--white);
        border-radius: var(--radius);
        padding: 1.5rem;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
        border: 1px solid var(--gray-200);
    }
    .confirm-box h3 {
        margin: 0 0 0.75rem;
        font-size: 1.1rem;
        color: var(--gray-800);
    }
    .confirm-box p {
        margin: 0 0 1.25rem;
        color: var(--gray-500);
        font-size: 0.95rem;
        line-height: 1.5;
    }
    .confirm-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
    .confirm-actions button {
        border-radius: 8px;
        padding: 0.6rem 1rem;
        font-weight: 600;
        font-size: 0.9rem;
        cursor: pointer;
        border: 1px solid var(--gray-200);
            background: var(--white);
        color: var(--gray-800);
    }
    .confirm-actions .btn-confirm {
        background: var(--accent);
        border-color: var(--accent);
        color: #1f2937;
    }
    .confirm-actions .btn-confirm:hover { background: #e08e15; }
    .confirm-actions .btn-cancel:hover { background: var(--gray-100); }

    /* WebGL липсва / контекстът е паднал */
    .webgl-fallback {
        position: absolute;
        left: 50%;
        bottom: 1rem;
        transform: translateX(-50%);
        z-index: 25;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        max-width: calc(100% - 2rem);
        padding: 0.65rem 0.9rem;
        background: #fffbeb;
        border: 1px solid #fcd34d;
        border-radius: 8px;
        color: #92400e;
        font-size: 0.85rem;
        line-height: 1.35;
        box-shadow: var(--shadow);
    }
    .webgl-fallback.hidden { display: none; }
    .webgl-fallback a { color: #92400e; font-weight: 700; text-decoration: underline; white-space: nowrap; }

    /* Sticky CTA за мобилни */
    .mobile-cta { display: none; }
    @media screen and (max-width: 900px) {
        .mobile-cta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 950;
            padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
            background: var(--white);
            border-top: 1px solid var(--gray-200);
            box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
        }
        .mobile-cta-info {
            display: flex;
            flex-direction: column;
            line-height: 1.15;
            min-width: 0;
        }
        .mobile-cta-label {
            font-size: 0.7rem;
            color: var(--gray-500);
        }
        .mobile-cta-amount {
            font-size: 1.25rem;
            font-weight: 800;
            color: var(--primary);
        }
        .mobile-cta-hint {
            font-size: 0.65rem;
            color: var(--gray-500);
            min-height: 0.9em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 52vw;
        }
        .btn-submit-mobile {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            min-height: 44px;
            padding: 0.65rem 1.15rem;
            border: none;
            border-radius: 8px;
            background: var(--accent);
            color: #1f2937;
            font-size: 0.95rem;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(249, 159, 27, 0.3);
        }
        .btn-submit-mobile:hover { background: #e08e15; }
        .btn-submit-mobile:disabled {
            background: var(--gray-200);
            color: var(--gray-500);
            cursor: not-allowed;
            box-shadow: none;
        }
        /* Да не закрива footer-а на мобилно */
        body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
    }
    @keyframes spin { 100% { transform: rotate(360deg); } }

    .m-editable-text-block{margin-bottom:1.375em;}
    .m-how-to-order__inner{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:column;flex-direction:column;}
    .m-how-to-order__step-title{text-align:center;}
    .m-how-to-order__step{position:relative;width:calc(100% - 60px * 2);border-bottom:2px dashed #000;padding:1.5rem 0;margin:0 60px;}
    .m-how-to-order__step:after{content:'';position:absolute;-ms-transform:none;transform:none;top:-2px;margin-top:0;width:60px;height:106%;}
    .m-how-to-order__step:nth-of-type(even):after{right:-60px;border-radius:0 60px 60px 0;border-right:2px dashed #000;border-bottom:2px dashed #000;border-top:2px dashed #000;}
    .m-how-to-order__step:nth-of-type(even) .m-how-to-order__step-image{right:-50px;}
    .m-how-to-order__step:nth-of-type(2n+3):after{right:auto;left:-60px;border-radius:60px 0 0 60px;border-right:none;border-left:2px dashed #000;border-bottom:2px dashed #000;border-top:2px dashed #000;}
    .m-how-to-order__step:nth-of-type(2n+3) .m-how-to-order__step-image{left:-50px;}
    .m-how-to-order__step:first-of-type .m-how-to-order__step-image{left:-50px;top:auto;bottom:-25px;}
    .m-how-to-order__step:last-of-type{border-bottom:none;}
    .m-how-to-order__step:last-of-type:after{content:none;}
    .m-how-to-order__step:last-of-type .m-how-to-order__step-image{top:0;}
    .m-how-to-order__step-image{position:absolute;background-image:url('../imgs/banner/banner-m-40.png');background-size:cover;top:50%;margin-top:-25px;width:50px;height:50px;}
    .m-how-to-order__step-image.step-upload{background-position:0 0;}
    .m-how-to-order__step-image.step-select-material{background-position:25% 0;}
    .m-how-to-order__step-image.step-get-an-instant-price{background-position:50% 0;}
    .m-how-to-order__step-image.step-let-us-take-care{background-position:75% 0;}
    .m-how-to-order__step-image.step-receive-your-products{background-position:100% 0;}
    @media screen and (min-width:36em){
        .m-how-to-order__inner{-ms-flex-direction:row;flex-direction:row;}
        .m-how-to-order__step{width:15%;margin:0;padding:0;border-bottom:none;}
        .m-how-to-order__step:after,.m-how-to-order__step:first-of-type:after,.m-how-to-order__step:nth-of-type(2n+3):after,.m-how-to-order__step:nth-of-type(even):after{top:50%;right:-16px;left:auto;margin-top:-16px;width:17px;height:17px;border-right:5px solid #6A9C89;border-bottom:5px solid #6A9C89;border-left:none;border-top:none;border-radius:0;-ms-transform:rotate(-45deg);transform:rotate(-45deg);}
        .m-how-to-order__step-image{position:static;width:100%;height:auto;padding-top:73%;margin-top:0;background-image:url('../imgs/banner/banner-40.png');}
    }
    .gallery-item img { transition: transform .3s; }
    .gallery-item:hover img { transform: scale(1.05); }
    .gallery-item:hover .gallery-item-caption { opacity: 1; }

    /* Херо снимка: <picture> вместо CSS background, за да е LCP изображение */
    .single-hero-slider {
        position: relative;
        overflow: hidden;
        background: #f1f5f9;
    }
    .single-hero-slider picture {
        display: block;
        width: 100%;
        height: 100%;
    }
    .single-hero-slider .hero-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .file-name-hint { color: var(--gray-500); font-weight: 400; margin-left: 10px; font-size: 0.85rem; }
    .upload-box h3 { margin-bottom: 0.5rem; }
    .upload-box p { color: var(--gray-500); font-size: 0.9rem; margin-bottom: 0; }
    .range-wrapper label { margin-bottom: 0; }
    .range-hint { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--gray-500); }
    .gallery-thumb { height: 250px; object-fit: cover; }
    .gallery-item-caption { background: linear-gradient(transparent, rgba(0,0,0,.6)); color: #fff; opacity: 0; transition: opacity .3s; }
    .b-title a { color: #253D4E; }

    /* --- Достъпност --- */
    /* Бяло на #F99F1B е ~2.2:1; тъмният текст минава AA за CTA. */
    .btn-submit { color: #1f2937; }
    .btn-submit:hover { color: #1f2937; }
    /* Theme-ът има button[type="submit"] { color: #fff } с по-висока
       специфичност от класа; затова вдигаме селектора и изключваме disabled. */
    .btn-submit[type="submit"]:not(:disabled),
    .btn-submit-mobile[type="submit"]:not(:disabled) { color: #1f2937; }

    :focus-visible,
    button:focus-visible,
    a:focus-visible,
    [tabindex]:focus-visible {
        outline: 3px solid var(--primary-dark) !important;
        outline-offset: 2px !important;
    }
    /* Темата слага :focus { outline: 0 !important } след нашия CSS. За
       generic бутони/линкове/полета вдигаме специфичността с body. */
    body button:focus-visible,
    body a:focus-visible,
    body input:focus-visible,
    body select:focus-visible,
    body textarea:focus-visible {
        outline: 3px solid var(--primary-dark) !important;
        outline-offset: 2px !important;
    }
    .color-option:focus-visible {
        outline: 3px solid var(--gray-800) !important;
        outline-offset: 3px !important;
    }
    .option-card:focus-visible,
    .option-cardk:focus-visible,
    .help-trigger:focus-visible,
    #drop-zone:focus-visible {
        outline: 3px solid var(--primary-dark) !important;
        outline-offset: 3px !important;
    }

    /* Изборът не е само цвят/рамка — добавя се и отметка. */
    .color-option { position: relative; }
    .color-option.selected::after {
        content: '\2713';
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #111827;
        font-size: 0.95rem;
        font-weight: 800;
        text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff;
        pointer-events: none;
    }
    .option-card, .option-cardk { position: relative; }
    .option-card.selected::after,
    .option-cardk.selected::after {
        content: '\2713';
        position: absolute;
        top: 6px;
        right: 8px;
        color: var(--primary);
        font-weight: 800;
        line-height: 1;
    }

    /* Page-specific контраст: темата ползва #7e7e7e/#6a9c89, които падат под AA. */
    h1.font-index { color: #253D4E; }
    .m-how-to-order .m-how-to-order__step-title { color: #4b5563; }
    .lg-content .m-editable-text-block { color: #4b5563; }
    .page-header .breadcrumb { color: #4b5563; }
    .page-header .breadcrumb a { color: #3f6f5e; text-decoration: underline; }
    .card.warning-box a,
    .lg-content .m-editable-text-block a { color: #3f6f5e; text-decoration: underline; }
    .panel-content .form-group label { color: #4b5563; }
    .panel-content .form-group > label { color: #4b5563; }
    .price-section .text-muted,
    #submit-hint { color: #4b5563 !important; }
    .opt-desc { color: #4b5563; }
    .range-val { color: #4b5563; }
    .panel-content .summary-item > span:first-child { color: #4b5563; }

    @media (prefers-reduced-motion: reduce) {
        .wow,
        .wow.animated,
        .animate__animated {
            animation: none !important;
            transition: none !important;
            transform: none !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        .single-animation-wrap,
        .hover-up,
        .gallery-item img,
        .gallery-item-caption,
        .toast,
        .confirm-modal,
        .btn-submit,
        .btn-submit-mobile,
        .processing-spinner {
            animation: none !important;
            transition: none !important;
            transform: none !important;
        }
    }