/* ==========================================================================
   Cattle Expert — Configurator Wizard (Shared)
   Dual-theme support: Station (blue) + Project (green).
   Mobile-first. Columns by default, 2-col grid at 768px.
   ========================================================================== */

/* ==========================================================================
   1. THEME TOKENS
   ========================================================================== */

/* Station wizard → green accent */
.ce-configurator--station {
    --ce-wizard-color:       #2C4A2E;
    --ce-wizard-color-dim:   rgba(44, 74, 46, 0.08);
    --ce-wizard-color-muted: rgba(44, 74, 46, 0.25);
}

/* Project wizard → green accent */
.ce-configurator--project {
    --ce-wizard-color:       #2C4A2E;
    --ce-wizard-color-dim:   rgba(44, 74, 46, 0.08);
    --ce-wizard-color-muted: rgba(44, 74, 46, 0.25);
}

/* ==========================================================================
   2. WRAPPER
   ========================================================================== */

.ce-configurator {
    max-width: 960px;
    margin-inline: auto;
    padding-bottom: 100px; /* space for sticky pricebar */
    font-family: var(--ce-font-body);
}

/* ==========================================================================
   3. STEP INDICATORS
   ========================================================================== */

.ce-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: var(--ce-space-2xl);
    overflow: hidden; /* prevent wrapping on small screens */
}

.ce-steps__item {
    display: flex;
    align-items: center;
    gap: var(--ce-space-sm);
    flex-shrink: 0;
    color: var(--ce-text-muted);
    font-size: var(--ce-text-sm);
    font-family: var(--ce-font-body);
}

.ce-steps__item--active {
    color: var(--ce-text-primary);
    font-weight: 600;
}

.ce-steps__item--done {
    color: var(--ce-wizard-color);
}

/* Circle */
.ce-steps__item::before {
    content: attr(data-step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ce-cream-muted);
    font-size: var(--ce-text-xs);
    font-weight: 600;
    flex-shrink: 0;
    transition: background var(--ce-transition-fast), color var(--ce-transition-fast);
}

.ce-steps__item--active::before {
    background: var(--ce-wizard-color);
    color: #fff;
}

.ce-steps__item--done::before {
    background: var(--ce-wizard-color-muted);
    color: #fff;
}

/* Label — hidden on mobile, shown on desktop */
.ce-steps__label {
    display: none;
}

/* Separator line between steps */
.ce-steps__separator {
    flex: 1;
    height: 1px;
    background: var(--ce-border-light);
    margin-inline: var(--ce-space-sm);
    min-width: 16px;
}

@media (min-width: 480px) {
    .ce-steps__label {
        display: inline;
    }
}

/* Step counter text (e.g. "Шаг 2 из 3") */
.ce-step-info {
    font-size: var(--ce-text-sm);
    color: var(--ce-text-muted);
    margin-bottom: var(--ce-space-lg);
}

/* ==========================================================================
   4. BASE CARDS (Station Step 1)
   ========================================================================== */

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

@media (min-width: 768px) {
    .ce-bases {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

.ce-base-card {
    background: #fff;
    border: 2px solid var(--ce-border-light);
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    transition:
        border-color var(--ce-transition-fast),
        transform var(--ce-transition-fast),
        box-shadow var(--ce-transition-fast);
    font-family: var(--ce-font-body);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.ce-base-card:hover {
    border-color: var(--ce-wizard-color-muted);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.ce-base-card--selected {
    border-color: var(--ce-wizard-color) !important;
    background: var(--ce-wizard-color-dim);
}

.ce-base-card__image-wrap {
    position: relative;
    overflow: hidden;
}

.ce-base-card__image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.ce-base-card__image-wrap--placeholder {
    height: 200px;
    background: linear-gradient(135deg, #2C4A2E 0%, #1a2e1b 100%);
}

.ce-base-card__price-badge {
    position: absolute;
    top: var(--ce-space-sm);
    right: var(--ce-space-sm);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    color: #fff;
    padding: 6px 14px;
    border-radius: var(--ce-radius-sm);
    font-size: var(--ce-text-sm);
    font-weight: 700;
}

.ce-base-card__body {
    padding: var(--ce-space-lg);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ce-base-card__name {
    font-family: var(--ce-font-display);
    font-size: var(--ce-text-xl);
    color: var(--ce-text-primary);
    margin-bottom: var(--ce-space-sm);
}

.ce-base-card__desc {
    font-size: var(--ce-text-sm);
    color: var(--ce-text-muted);
    line-height: 1.5;
    flex: 1;
    margin-bottom: var(--ce-space-md);
}

.ce-base-card__tags {
    display: flex;
    gap: var(--ce-space-xs);
    flex-wrap: wrap;
}

.ce-base-card__tag {
    display: inline-block;
    background: var(--ce-cream-muted);
    color: var(--ce-text-secondary);
    font-size: var(--ce-text-xs);
    font-weight: 500;
    padding: 4px var(--ce-space-sm);
    border-radius: var(--ce-radius-sm);
}

/* ==========================================================================
   5. OPTIONS — TOGGLE & VARIANT (Station Step 2)
   ========================================================================== */

.ce-options {
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-sm);
}

/* --- Toggle option (on/off) --- */
.ce-option-toggle {
    display: flex;
    align-items: center;
    gap: var(--ce-space-md);
    padding: var(--ce-space-md);
    background: #fff;
    border: 1px solid var(--ce-border-light);
    cursor: pointer;
    transition:
        border-color var(--ce-transition-fast),
        background var(--ce-transition-fast);
}

.ce-option-toggle:hover {
    border-color: var(--ce-wizard-color-muted);
}

.ce-option-toggle--active {
    border-color: var(--ce-wizard-color);
    background: var(--ce-wizard-color-dim);
}

.ce-option-toggle__info {
    flex: 1;
    min-width: 0;
}

.ce-option-toggle__info strong {
    display: block;
    font-size: var(--ce-text-md);
    font-weight: 600;
    color: var(--ce-text-primary);
    margin-bottom: var(--ce-space-xs);
}

.ce-option-toggle__info span {
    display: block;
    font-size: var(--ce-text-xs);
    color: var(--ce-text-muted);
    line-height: 1.4;
}

.ce-option-toggle__right {
    display: flex;
    align-items: center;
    gap: var(--ce-space-md);
    flex-shrink: 0;
}

.ce-option-toggle__price {
    font-size: var(--ce-text-md);
    font-weight: 600;
    color: var(--ce-wizard-color);
    white-space: nowrap;
}

/* Toggle switch */
.ce-switch {
    position: relative;
    width: 40px;
    height: 22px;
    background: var(--ce-cream-muted);
    border-radius: 11px;
    flex-shrink: 0;
    transition: background var(--ce-transition-fast);
    font-size: 0;
    color: transparent;
}

.ce-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform var(--ce-transition-fast);
}

.ce-option-toggle--active .ce-switch {
    background: var(--ce-wizard-color);
}

.ce-option-toggle--active .ce-switch::after {
    transform: translateX(18px);
}

/* --- Variant option (radio choice) --- */
.ce-option-variant {
    background: #fff;
    border: 1px solid var(--ce-border-light);
    padding: var(--ce-space-md);
}

.ce-option-variant__header {
    font-size: var(--ce-text-md);
    font-weight: 600;
    color: var(--ce-text-primary);
    margin-bottom: var(--ce-space-sm);
}

.ce-option-variant__choices {
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-xs);
}

.ce-variant-choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ce-space-sm) var(--ce-space-md);
    border: 1px solid var(--ce-border-light);
    cursor: pointer;
    background: var(--ce-cream);
    transition:
        border-color var(--ce-transition-fast),
        background var(--ce-transition-fast);
    gap: var(--ce-space-sm);
}

.ce-variant-choice:hover {
    border-color: var(--ce-wizard-color-muted);
}

.ce-variant-choice--selected {
    border-color: var(--ce-wizard-color);
    background: var(--ce-wizard-color-dim);
}

.ce-variant-choice__price {
    font-size: var(--ce-text-md);
    font-weight: 600;
    color: var(--ce-wizard-color);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ==========================================================================
   6. HERD FILTER (Project Step 1)
   ========================================================================== */

.ce-herd-options {
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-sm);
}

.ce-herd-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ce-space-md) var(--ce-space-lg);
    background: #fff;
    border: 2px solid var(--ce-border-light);
    cursor: pointer;
    font-size: var(--ce-text-md);
    font-weight: 500;
    color: var(--ce-text-primary);
    transition:
        border-color var(--ce-transition-fast),
        background var(--ce-transition-fast);
    gap: var(--ce-space-md);
}

.ce-herd-option:hover {
    border-color: var(--ce-wizard-color-muted);
}

.ce-herd-option--selected {
    border-color: var(--ce-wizard-color);
    background: var(--ce-wizard-color-dim);
}

.ce-herd-count {
    font-size: var(--ce-text-sm);
    color: var(--ce-text-muted);
    margin-top: var(--ce-space-md);
}

/* ==========================================================================
   7. PROJECT CARDS (Project Step 2)
   ========================================================================== */

.ce-project-cards {
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-md);
}

@media (min-width: 768px) {
    .ce-project-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

.ce-project-card {
    position: relative;
    background: #fff;
    border: 2px solid var(--ce-border-light);
    border-radius: 12px;
    cursor: pointer;
    transition:
        border-color var(--ce-transition-fast),
        transform var(--ce-transition-fast),
        box-shadow var(--ce-transition-fast);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.ce-project-card:hover {
    border-color: var(--ce-wizard-color-muted);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.ce-project-card--selected {
    border-color: var(--ce-wizard-color);
    background: var(--ce-wizard-color-dim);
}

.ce-project-card__image-wrap {
    position: relative;
    overflow: hidden;
}

.ce-project-card__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.ce-project-card__image-wrap--placeholder {
    height: 200px;
    background: linear-gradient(135deg, #2C4A2E 0%, #1a2e1b 100%);
}

.ce-project-card__price-badge {
    position: absolute;
    top: var(--ce-space-sm);
    right: var(--ce-space-sm);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    color: #fff;
    padding: 6px 14px;
    border-radius: var(--ce-radius-sm);
    font-size: var(--ce-text-sm);
    font-weight: 700;
}

.ce-project-card__crew-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ce-space-xs);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: var(--ce-text-xs);
    font-weight: 700;
    padding: 4px var(--ce-space-sm);
    border-radius: var(--ce-radius-sm);
    position: absolute;
    top: var(--ce-space-sm);
    right: var(--ce-space-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ce-project-card__crew-badge--inline {
    position: static;
    margin: var(--ce-space-md) var(--ce-space-md) 0;
}

.ce-project-card__desc {
    font-size: var(--ce-text-sm);
    color: var(--ce-text-muted);
    line-height: 1.5;
    margin-bottom: var(--ce-space-sm);
}

.ce-project-card__body {
    padding: var(--ce-space-md);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ce-project-card__name {
    font-family: var(--ce-font-display);
    font-size: var(--ce-text-xl);
    color: var(--ce-text-primary);
    margin-bottom: var(--ce-space-xs);
}

.ce-project-card__meta {
    font-size: var(--ce-text-sm);
    color: var(--ce-text-muted);
    margin-bottom: var(--ce-space-sm);
}

.ce-project-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ce-space-xs);
    margin-bottom: var(--ce-space-md);
    margin-top: auto;
}

.ce-project-card__tag {
    display: inline-block;
    background: var(--ce-cream-muted);
    color: var(--ce-text-secondary);
    font-size: var(--ce-text-xs);
    padding: 2px var(--ce-space-sm);
    border-radius: var(--ce-radius-sm);
}

.ce-project-card__price {
    font-size: var(--ce-text-lg);
    font-weight: 600;
    color: var(--ce-wizard-color);
    margin-top: auto;
}

/* ==========================================================================
   8. BOM TABLE (Project Step 3)
   ========================================================================== */

.ce-bom {
    background: #fff;
    border: 1px solid #d4cfc5;
    border-radius: 12px;
    padding: var(--ce-space-md);
    margin-bottom: var(--ce-space-xl);
    overflow: hidden;
}

.ce-bom__item {
    display: flex;
    align-items: baseline;
    gap: var(--ce-space-md);
    padding: var(--ce-space-sm) 0;
    border-bottom: 1px solid rgba(44, 74, 46, 0.1);
}

.ce-bom__item:last-child {
    border-bottom: none;
}

.ce-bom__item-name {
    flex: 1;
    font-size: var(--ce-text-sm);
    color: var(--ce-text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ce-bom__item-sku {
    font-size: var(--ce-text-xs);
    color: var(--ce-text-muted);
    flex-shrink: 0;
}

.ce-bom__item-right {
    display: flex;
    align-items: baseline;
    gap: var(--ce-space-md);
    flex-shrink: 0;
}

.ce-bom__item-qty {
    font-size: var(--ce-text-sm);
    color: var(--ce-text-muted);
    white-space: nowrap;
}

.ce-bom__item-sum {
    font-size: var(--ce-text-sm);
    font-weight: 600;
    color: var(--ce-wizard-color);
    white-space: nowrap;
    min-width: 80px;
    text-align: right;
}

/* ==========================================================================
   9. DRAWING PREVIEW (Project Step 3)
   ========================================================================== */

.ce-drawing {
    display: block;
    cursor: zoom-in;
    margin-bottom: var(--ce-space-xl);
    border: 1px solid var(--ce-border-light);
    border-radius: 12px;
    overflow: hidden;
    transition: opacity var(--ce-transition-fast);
}

.ce-drawing:hover {
    opacity: 0.9;
}

.ce-drawing img {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   10. SUMMARY (Both wizards — final step)
   ========================================================================== */

.ce-summary {
    background: #fff;
    border: 1px solid #d4cfc5;
    border-radius: 12px;
    padding: var(--ce-space-lg);
    margin-bottom: var(--ce-space-xl);
}

.ce-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--ce-space-sm) 0;
    border-bottom: 1px solid rgba(44, 74, 46, 0.1);
    font-size: var(--ce-text-md);
    color: var(--ce-text-primary);
    gap: var(--ce-space-sm);
}

.ce-summary__row:last-child {
    border-bottom: none;
}

.ce-summary__row > span:first-child {
    color: var(--ce-text-secondary);
    flex-shrink: 0;
}

.ce-summary__row > span:last-child {
    text-align: right;
}

.ce-summary__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: var(--ce-space-md);
    margin-top: var(--ce-space-sm);
    border-top: 1px solid #d4cfc5;
    gap: var(--ce-space-sm);
}

.ce-summary__total-label {
    font-family: var(--ce-font-display);
    font-size: var(--ce-text-lg);
    color: var(--ce-text-primary);
}

.ce-summary__total-price {
    font-family: var(--ce-font-display);
    font-size: var(--ce-text-2xl);
    color: var(--ce-wizard-color);
}

/* ==========================================================================
   11. ACTIONS
   ========================================================================== */

.ce-actions {
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-sm);
    margin-bottom: var(--ce-space-xl);
}

@media (min-width: 480px) {
    .ce-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* Buttons — extend base .ce-btn from components.css */
.ce-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ce-space-sm);
    padding: 12px var(--ce-space-lg);
    font-family: var(--ce-font-body);
    font-size: var(--ce-text-md);
    font-weight: 600;
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition:
        background var(--ce-transition-fast),
        border-color var(--ce-transition-fast),
        opacity var(--ce-transition-fast),
        transform var(--ce-transition-fast);
    border-radius: var(--ce-radius-sm);
    white-space: nowrap;
}

.ce-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.ce-btn:active {
    transform: translateY(0);
}

.ce-btn--primary {
    background: var(--ce-wizard-color);
    color: #fff;
    border-color: var(--ce-wizard-color);
}

.ce-btn--secondary {
    background: transparent;
    color: var(--ce-wizard-color);
    border-color: var(--ce-wizard-color);
}

.ce-btn--ghost {
    background: transparent;
    color: var(--ce-text-muted);
    border-color: var(--ce-border-light);
}

.ce-btn--ghost:hover {
    color: var(--ce-text-primary);
    border-color: var(--ce-text-muted);
}

/* ==========================================================================
   12. CROSS-LINK BLOCK
   ========================================================================== */

.ce-crosslink {
    border-top: 1px solid var(--ce-border-light);
    padding-top: var(--ce-space-xl);
    margin-top: var(--ce-space-2xl);
}

.ce-crosslink__box {
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-sm);
    padding: var(--ce-space-lg);
    background: var(--ce-cream-muted);
    border-left: 3px solid var(--ce-border-light);
    transition: border-color var(--ce-transition-fast);
}

.ce-crosslink__box--station {
    border-left-color: #2C4A2E;
}

.ce-crosslink__box--project {
    border-left-color: #2C4A2E;
}

.ce-crosslink__title {
    font-family: var(--ce-font-display);
    font-size: var(--ce-text-xl);
    color: var(--ce-text-primary);
    margin-bottom: 0;
}

.ce-crosslink__desc {
    font-size: var(--ce-text-sm);
    color: var(--ce-text-muted);
    line-height: 1.5;
    margin-bottom: var(--ce-space-sm);
}

.ce-crosslink__link {
    display: inline-flex;
    align-items: center;
    gap: var(--ce-space-xs);
    font-size: var(--ce-text-sm);
    font-weight: 600;
    text-decoration: none;
    color: var(--ce-text-primary);
    transition: color var(--ce-transition-fast);
}

.ce-crosslink__box--station .ce-crosslink__link {
    color: #2C4A2E;
}

.ce-crosslink__box--project .ce-crosslink__link {
    color: #2C4A2E; /* darker shade for green theme legibility */
}

.ce-crosslink__link:hover {
    text-decoration: underline;
}

/* ==========================================================================
   13. STICKY PRICE BAR
   ========================================================================== */

/* CSS variable scoping: pricebar sits outside .ce-configurator in the DOM,
   so --ce-wizard-color doesn't cascade from the wrapper. Define them here. */
.ce-configurator--station ~ .ce-pricebar,
.ce-configurator--station + .ce-pricebar {
    --ce-wizard-color:     #2C4A2E;
    --ce-wizard-color-dim: rgba(44, 74, 46, 0.05);
}

.ce-configurator--project ~ .ce-pricebar,
.ce-configurator--project + .ce-pricebar {
    --ce-wizard-color:     #2C4A2E;
    --ce-wizard-color-dim: rgba(44, 74, 46, 0.05);
}

.ce-pricebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--ce-dark);
    color: var(--ce-cream);
    z-index: 200;
    padding: var(--ce-space-md) var(--ce-content-padding);
    transform: translateY(100%);
    transition:
        transform 0.35s ease,
        box-shadow 0.3s ease;
    will-change: transform;
}

.ce-pricebar--visible {
    transform: translateY(0);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
}

.ce-pricebar__inner {
    max-width: 960px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ce-space-md);
}

.ce-pricebar__label {
    font-size: var(--ce-text-sm);
    color: rgba(245, 243, 238, 0.6);
    flex-shrink: 0;
}

.ce-pricebar__price {
    font-family: var(--ce-font-display);
    font-size: var(--ce-text-2xl);
    color: var(--ce-wizard-color);
    flex: 1;
}

.ce-pricebar__nav {
    display: flex;
    align-items: center;
    gap: var(--ce-space-sm);
    flex-shrink: 0;
}

/* Pricebar buttons inherit .ce-btn structure but are sized for the bar */
.ce-pricebar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ce-space-xs);
    min-width: 120px;
    padding: 10px var(--ce-space-md);
    font-family: var(--ce-font-body);
    font-size: var(--ce-text-sm);
    font-weight: 600;
    border: 2px solid transparent;
    border-radius: var(--ce-radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition:
        background var(--ce-transition-fast),
        border-color var(--ce-transition-fast),
        opacity var(--ce-transition-fast);
    white-space: nowrap;
}

/* Icon hidden on desktop, shown on mobile via @media above */
.ce-pricebar__btn-icon {
    display: none;
    font-size: 18px;
    line-height: 1;
}

.ce-pricebar__btn--next {
    background: var(--ce-wizard-color);
    color: #fff;
    border-color: var(--ce-wizard-color);
}

.ce-pricebar__btn--next:hover {
    opacity: 0.85;
}

.ce-pricebar__btn--back {
    background: transparent;
    color: var(--ce-cream);
    border-color: rgba(245, 243, 238, 0.3);
}

.ce-pricebar__btn--back:hover {
    border-color: var(--ce-cream);
}

/* Pulse animation for next button hint */
@keyframes ce-pulse {
    0%, 100% { transform: scale(1); box-shadow: none; }
    50%       { transform: scale(1.06); box-shadow: 0 0 16px rgba(255,255,255,0.2); }
}

.ce-pricebar__btn--next--pulse {
    animation: ce-pulse 1.5s ease-in-out 2;
}

/* ==========================================================================
   14. CART RESULT
   ========================================================================== */

.ce-cart-result--success {
    background: rgba(44, 74, 46, 0.07);
    border: 1px solid var(--ce-green-sage);
    padding: var(--ce-space-md);
    margin-bottom: var(--ce-space-md);
    text-align: center;
    border-radius: var(--ce-radius-sm);
}

.ce-cart-result--success a:not(.ce-btn) {
    color: var(--ce-green-dark);
    font-weight: 600;
    text-decoration: underline;
}

.ce-cart-result--success a.ce-btn.ce-btn--primary {
    color: #fff !important;
    text-decoration: none;
    margin-left: var(--ce-space-md);
}

.ce-cart-result--error {
    background: rgba(200, 50, 50, 0.07);
    border: 1px solid rgba(200, 50, 50, 0.3);
    color: #c03030;
    padding: var(--ce-space-md);
    margin-bottom: var(--ce-space-md);
    text-align: center;
    border-radius: var(--ce-radius-sm);
}

/* ==========================================================================
   15. RESPONSIVE OVERRIDES (mobile tweaks)
   ========================================================================== */

@media (max-width: 600px) {
    /* Compact single-line pricebar on mobile */
    .ce-pricebar {
        padding: var(--ce-space-sm) var(--ce-content-padding);
    }

    .ce-pricebar__inner {
        flex-wrap: nowrap;
    }

    .ce-pricebar__label {
        font-size: 14px;
    }

    .ce-pricebar__price {
        font-size: 22px;
    }

    /* Hide text labels, show only arrow icons */
    .ce-pricebar__btn-text {
        display: none;
    }

    .ce-pricebar__btn-icon {
        display: inline;
    }

    .ce-pricebar__btn {
        min-width: 44px;
        padding: 10px 12px;
        font-size: var(--ce-text-md);
    }

    /* More space below content so pricebar doesn't cover cross-sell */
    .ce-configurator {
        padding-bottom: 80px;
    }
}

@media (max-width: 480px) {
    .ce-bom__item-sku {
        display: none; /* hide SKU on very small screens */
    }
}

/* ==========================================================================
   16. PRINT STYLES
   ========================================================================== */

@media print {
    .ce-pricebar,
    .ce-actions,
    .ce-crosslink,
    .ce-steps {
        display: none !important;
    }

    .ce-configurator {
        padding-bottom: 0 !important;
        max-width: 100%;
    }

    .ce-summary {
        background: transparent !important;
        border: 1px solid #ccc;
        color: #000;
    }

    .ce-summary__row,
    .ce-summary__total-label,
    .ce-summary__total-price {
        color: #000 !important;
    }

    .ce-bom {
        background: transparent !important;
        border: 1px solid #ccc;
    }

    .ce-bom__item-name,
    .ce-bom__item-qty,
    .ce-bom__item-sum {
        color: #000 !important;
    }
}