/* Assets version: 1.1.14 */
:root {
    /* в”Ђв”Ђ Editor / Modal в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
    --cc-primary: #FFC400;
    --cc-blue: #0071a1;
    --cc-blue-dark: #1d4ed8;
    --cc-overlay: rgba(0, 0, 0, 0.95);
    --cc-glass: #0b0c10;
    --cc-text: #ffffff;

    /* в”Ђв”Ђ Product Page (new flow) в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
    --cc-accent: #2563eb;
    /* primary blue for product page */
    --cc-green: #22c55e;
    /* toggle ON / selected */
    --cc-border: #e5e7eb;
    /* card borders */
    --cc-border-light: #f0f0f0;
    /* row separators */
    --cc-bg-soft: #f9fafb;
    /* soft backgrounds */
    --cc-text-primary: #111;
    --cc-text-secondary: #6b7280;
    --cc-active-border: #d1fae5;
    /* active card border */
    --cc-active-bg: #f0fdf4;
    /* active card background */
    --cc-radius-card: 0;
    --cc-radius-btn: 0;
}

/* ========================================
   Modal Core
   ======================================== */
.cc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--cc-overlay);
    backdrop-filter: blur(8px);
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
}

.cc-modal-overlay.active {
    display: flex;
}

.cc-modal-container {
    width: 95%;
    max-width: 1300px;
    height: 85vh;
    background: var(--cc-glass);
    border-radius: 0;
    position: relative;
    color: var(--cc-text);
    overflow: hidden;
}

.cc-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--cc-primary);
    width: 44px;
    height: 44px;
    cursor: pointer;
    font-size: 22px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: background 0.2s;
}

.cc-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ========================================
   Progress Bar (Modal Header)
   ======================================== */
.cc-progress-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: #0b0c10;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.cc-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
}

.cc-progress-dot {
    width: 28px;
    height: 28px;
    background: #2a2a2a;
    border: 2px solid #444;
    color: #666;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.cc-progress-dot .dashicons {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
}

.cc-progress-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #555;
    white-space: nowrap;
    transition: color 0.3s;
}

.cc-progress-line {
    flex: 1;
    min-width: 40px;
    max-width: 100px;
    height: 2px;
    background: #2a2a2a;
    margin: 0 8px 14px;
    transition: background 0.3s;
}

.cc-progress-step.cc-progress-done .cc-progress-dot {
    background: #2e7d32;
    border-color: #4caf50;
    color: #4caf50;
}

.cc-progress-step.cc-progress-done .cc-progress-label {
    color: #4caf50;
}

.cc-progress-step.cc-progress-done+.cc-progress-line {
    background: #4caf50;
}

.cc-progress-step.cc-progress-active .cc-progress-dot {
    background: var(--cc-blue);
    border-color: #5eb8ff;
    color: #fff;
}

.cc-progress-step.cc-progress-active .cc-progress-label {
    color: #fff;
}

/* Loader with progress text */
.cc-loader-status {
    color: #ccc;
    font-size: 13px;
    margin-top: 10px;
    text-align: center;
    min-height: 18px;
}

.cc-loader-progress {
    width: 160px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    margin-top: 8px;
    overflow: hidden;
}

.cc-loader-progress-fill {
    height: 100%;
    background: var(--cc-primary);
    width: 0;
    transition: width 0.3s ease;
}

/* ========================================
   Floating Context Toolbar
   ======================================== */
.cc-ctx-inner {
    display: flex;
    align-items: center;
    gap: 2px;
    background: #fff;
    padding: 6px 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
}

.cc-ctx-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 5px 8px;
    color: #333;
    line-height: 1;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-ctx-btn:hover {
    background: #f0f0f0;
}

.cc-ctx-sep {
    width: 1px;
    height: 22px;
    background: #ddd;
    margin: 0 4px;
    flex-shrink: 0;
}

.cc-ctx-bg-btn {
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    color: #333;
    gap: 4px;
    white-space: nowrap;
}

.cc-ctx-bg-btn:hover {
    background: #e8e8e8;
}

.cc-ctx-bg-btn strong {
    color: var(--cc-blue);
}

/* ========================================
   Step Layouts
   ======================================== */
.cc-step {
    display: none;
    min-height: 0;
}

.cc-step.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.cc-split-layout {
    display: flex;
    height: 100%;
}

.cc-left-col {
    flex: 0 0 55%;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    background: #000;
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
}

.cc-right-col {
    flex: 1;
    background: #fff;
    color: #333;
    display: flex;
    flex-direction: column;
}

/* ========================================
   Step 0: Size Selection
   ======================================== */
.cc-size-selection-side {
    padding: 40px;
}

.cc-size-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.cc-size-chart-link {
    color: #666;
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.cc-size-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 25px;
    max-height: 450px;
    overflow-y: auto;
}

.cc-size-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: #fff;
    border: 1px solid #efefef;
    border-radius: 0;
    cursor: pointer;
    transition: 0.2s;
    position: relative;
}

.cc-size-item:hover {
    border-color: #ddd;
    background: #fafafa;
}

.cc-size-item.active {
    border-color: var(--cc-blue);
    box-shadow: 0 0 0 1px var(--cc-blue);
}

.cc-size-item-info {
    flex-grow: 1;
    padding-left: 15px;
}

.cc-size-item-label {
    font-size: 14px;
    font-weight: 700;
    color: #222;
    line-height: 1.3;
}

.cc-size-subtitle {
    font-weight: 400;
    color: #666;
    font-size: 0.88em;
}

.cc-size-item-pricing {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 3px;
}

.cc-size-sale {
    color: var(--cc-blue);
    font-weight: 800;
    font-size: 15px;
}

.cc-size-reg {
    text-decoration: line-through;
    color: #aaa;
    font-size: 13px;
}

.cc-size-price {
    color: var(--cc-blue);
    font-weight: 800;
    font-size: 15px;
}

/* Upgrade banner shown after size selection */
.cc-size-upgrade-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px 16px;
    border: 2px solid #e67e22;
    border-radius: 0;
    background: transparent;
    color: #e67e22;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    margin-top: 2px;
}

.cc-size-upgrade-btn:hover {
    background: #e67e22;
    color: #fff;
}

.cc-size-item-check {
    display: none;
    position: absolute;
    right: 15px;
    color: var(--cc-blue);
}

.cc-size-item.active .cc-size-item-check {
    display: block;
}

/* ========================================
   Step 2: Full-Screen Editor
   ======================================== */
.cc-full-editor {
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    min-height: 0;
    overflow: hidden;
}

.cc-editor-main {
    position: relative;
    --cc-bar-h: 60px;
    background: #1a2a3a;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 64px 18px 92px;
    aspect-ratio: 1 / 1;
    width: 100%;
    flex-shrink: 0;
    z-index: 5;
    box-sizing: border-box;
    isolation: isolate;
}

.cc-canvas-container-wrap {
    position: relative;
}


/* Loader */
.cc-loader-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cc-loader-circle {
    --cc-loader-progress: 0%;
    display: flex;
    width: 108px;
    height: 108px;
    padding: 8px;
    border-radius: 0;
    background:
        conic-gradient(#23b7ee var(--cc-loader-progress), rgba(255, 255, 255, 0.10) 0);
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.cc-loader-circle__inner {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: rgba(19, 34, 49, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.cc-loader-circle__percent {
    color: #f8fbff;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0;
}

/* Floating Action (Add Text) */
.cc-floating-action {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 102;
    background: var(--cc-blue);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 0;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: 0.2s;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.cc-floating-action:hover {
    background: var(--cc-primary);
    color: #000;
    transform: translateY(-2px);
}

.cc-floating-action .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* ========================================
   Editor Toolbar (Bottom Bar)
   ======================================== */
.cc-bottom-bar {
    position: relative;
    z-index: 110;
    height: var(--cc-bar-h, 60px);
    background: #0b1118;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    flex-shrink: 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.18);
}

.cc-tool-group {
    display: flex;
    gap: 30px;
}

.cc-tool-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    opacity: 0.7;
    transition: 0.2s;
}

.cc-tool-item:hover {
    opacity: 1;
}

.cc-tool-item>span {
    color: #aaa;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.cc-btn-group {
    display: flex;
    gap: 5px;
}

.cc-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 0;
}

.cc-icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.cc-icon-btn .dashicons {
    font-size: 24px !important;
    width: 24px !important;
    height: 24px !important;
    color: #fff !important;
    line-height: 1 !important;
}

/* Action Group (Toggle + Save) */
.cc-action-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cc-action-btn {
    padding: 10px 22px;
    border: none;
    border-radius: 0;
    font-weight: 800;
    cursor: pointer;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: 0.2s;
}

.cc-btn-blue {
    background: var(--cc-blue);
    color: #fff;
}

.cc-btn-blue:hover {
    background: var(--cc-blue-dark);
}

.cc-btn-outline {
    background: transparent;
    color: var(--cc-blue);
    border: 2px solid var(--cc-blue);
}

.cc-btn-outline:hover {
    background: var(--cc-blue);
    color: #fff;
}

.cc-btn-done {
    white-space: nowrap;
}

/* Toggle Switch (Keep Background) */
.cc-toggle-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.cc-toggle-switch input[type="checkbox"] {
    display: none;
}

.cc-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background: #444;
    transition: 0.3s;
    flex: 0 0 44px;
}

.cc-slider::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    transition: 0.3s;
}

.cc-toggle-switch input:checked+.cc-slider {
    background: var(--cc-primary);
}

.cc-toggle-switch input:checked+.cc-slider::before {
    transform: translateX(20px);
}

.cc-toggle-label {
    color: #aaa;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* ========================================
   Text Controls Panel
   ======================================== */
.cc-text-controls-panel {
    background: #111;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: none;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 101;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.5);
    transform: translateY(-100%);
}

/* в”Ђв”Ђ Font selector panel в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-text-font-panel {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 18px;
    z-index: 105;
    width: min(720px, calc(100% - 36px));
    max-width: calc(100% - 36px);
    display: flex;
    align-items: stretch;
    gap: 0;
    background: rgba(10, 18, 28, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(12px);
    transform: translate(-50%, 18px);
    opacity: 0;
    transition: transform .2s ease, opacity .18s;
    pointer-events: none;
}

.cc-text-font-panel.cc-font-panel--open {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}

.cc-text-controls-inner {
    display: flex;
    gap: 10px;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    padding: 5px;
    scrollbar-width: none;
}

.cc-text-controls-inner::-webkit-scrollbar {
    display: none;
}

.cc-font-btn {
    flex-shrink: 0;
    min-width: 90px;
    min-height: 38px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}

.cc-font-btn:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.22);
}

.cc-font-btn--active {
    background: rgba(37, 99, 235, 0.18);
    border-color: rgba(96, 165, 250, 0.85);
    color: #dbeafe;
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.32);
}

.cc-font-divider {
    flex: 0 0 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 5px;
}

#cc-text-color-picker {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border: none;
    cursor: pointer;
    background: transparent;
}

#cc-text-color-picker::-webkit-color-swatch {
    border: 2px solid #fff;
}

.cc-remove-text-btn {
    flex: 0 0 auto;
    background: #d63638;
    color: #fff;
    border: none;
    width: 38px;
    height: 38px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-remove-text-btn:hover {
    background: #b32d2e;
}

.cc-remove-text-btn .dashicons {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
    color: #fff !important;
}

/* ========================================
   Tutorial Overlay
   ======================================== */
.cc-tutorial-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-tutorial-wrap {
    /* Soft scrim under the card so the gesture hint reads cleanly over the canvas */
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.cc-tutorial-card {
    background: linear-gradient(180deg, #14171c 0%, #0b0d11 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    padding: 32px 28px 24px;
    width: min(86%, 340px);
    max-width: 420px;
    text-align: center;
}

.cc-tutorial-card p {
    color: #e5e7eb;
    font-size: 15px;
    line-height: 1.55;
    margin: 18px 4px 22px;
    letter-spacing: 0.01em;
}

.cc-tutorial-ok {
    background: linear-gradient(180deg, #6f7785 0%, #5c6573 100%);
    color: #fff;
    border: none;
    width: 100%;
    border-radius: 0;
    padding: 14px 22px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.05em;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
    text-transform: uppercase;
}

.cc-tutorial-ok:hover {
    filter: brightness(1.08);
}

.cc-tutorial-ok:active {
    transform: translateY(1px);
}

/* Pinch animation */
.cc-pinch-anim {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 4px;
}

.cc-hand {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.cc-hand-open {
    animation: cc-pinch-open 1.4s ease-in-out infinite;
}

.cc-hand-closed {
    animation: cc-pinch-closed 1.4s ease-in-out infinite;
}

@keyframes cc-pinch-open {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    40% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0;
        transform: scale(0.85);
    }

    100% {
        opacity: 0;
        transform: scale(0.85);
    }
}

@keyframes cc-pinch-closed {
    0% {
        opacity: 0;
        transform: scale(0.85);
    }

    40% {
        opacity: 0;
        transform: scale(0.85);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }

    90% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.85);
    }
}

/* ========================================
   Step 1: On-Page Summary / Options
   ======================================== */
.cc-options-container {
    flex: 1;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cc-option-block {
    border: 1px solid #efefef;
    background: #fff;
    border-radius: 0;
    overflow: hidden;
}

.cc-block-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.cc-block-header:hover {
    background: #fafafa;
}

.cc-block-title {
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #222;
    flex: 1;
}


/* Total & Action Area */

.cc-modal-cart-summary {
    padding: 20px 25px;
    border-top: 1px solid #efefef;
    background: #fff;
}

.cc-total-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--cc-text-primary);
}

#cc-modal-grand-total {
    font-size: 22px;
    font-weight: 900;
    color: var(--cc-blue);
}

/* ========================================
   On-Page Options (Product Summary)
   ======================================== */
#cc-on-page-options {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f7f7f7;
    display: none;
}

.cc-on-page-title {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #333;
    margin: 0 0 12px;
}

.cc-on-page-size-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

/* Gallery Replacement (Left Side) */
#cc-page-preview {
    width: 100%;
    margin-bottom: 20px;
}

@media (min-width: 769px) {
    #cc-page-preview {
        width: 41.1%;
        float: left;
        margin-right: 5.8%;
        margin-bottom: 30px;
        position: -webkit-sticky;
        position: sticky;
        top: 20px;
        align-self: flex-start;
    }
}

.cc-page-preview-inner {
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 30%),
        linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
    border: 1px solid #d9e3f0;
    border-radius: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
    min-height: clamp(380px, 42vw, 560px);
    padding: 16px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.cc-upload-placeholder {
    text-align: center;
    color: #334155;
    padding: 20px;
    margin: auto;
}

.cc-placeholder-icon {
    height: 50px;
    margin-bottom: 10px;
    opacity: 0.6;
}

.cc-placeholder-text {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

#cc-page-preview-img {
    display: block;
    width: auto;
    max-width: 100%;
    margin: auto;
    object-fit: contain;
    padding: 0;
}

.cc-edit-image-btn {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 7px 14px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
}

.cc-edit-image-btn:hover {
    background: var(--cc-blue);
    border-color: var(--cc-blue);
}

.cc-btn-start-over {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 11px;
    padding: 6px 12px;
}

.cc-btn-start-over:hover {
    background: var(--cc-blue);
    border-color: var(--cc-blue);
}

/* Quantity Stepper — defined in Addon UI Unification section below */

/* Info & Engraving Summary (Theme Integrated) */
.cc-options-container .single-product-extras {
    margin: 15px 0 0;
    padding: 0;
    border: none;
}

.cc-options-container .single-product-extras ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cc-options-container .single-product-extras li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: #f9f9f9;
    border-left: 3px solid #ddd;
    margin-bottom: 8px !important;
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

.cc-engraving-summary {
    border-left: 3px solid #ffc400 !important;
    background: #fffdf2 !important;
}

.cc-engraving-price {
    font-weight: 800;
    font-size: 12px;
    color: #b8860b;
    background: #fff3c0;
    padding: 2px 8px;
}

.cc-engraving-list {
    margin: 0;
    padding: 0 15px 10px 40px;
    list-style: none;
}

.cc-engraving-list li {
    font-size: 12px;
    color: #444;
    padding: 2px 0;
    border-bottom: 1px dashed #efe0b0;
}

/* ========================================
   Child Modal (Added to Cart)
   ======================================== */
.cc-child-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100001;
    display: none;
    align-items: center;
    justify-content: center;
}

.cc-child-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.cc-child-modal-content {
    position: relative;
    z-index: 1;
    background: #fff;
    padding: 30px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.cc-child-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #999;
}

.cc-prompt-body h3 {
    margin: 10px 0;
    color: #222;
}

.cc-prompt-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.cc-prompt-actions .cc-action-btn {
    flex: 1;
    padding: 12px;
    border-radius: 0;
}

/* Configure Crystal button — simple solid style */
.cc-configure-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 15px 20px;
    background: var(--cc-blue);
    color: #fff;
    border: none;
    font-size: 1em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s;
}

.cc-configure-btn:hover {
    background: var(--cc-blue-dark);
}

/* Preview action buttons — absolute overlay at bottom of preview image */
.cc-page-preview-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: auto;
    padding: 10px;
    border: 1px solid rgba(217, 227, 240, 0.95);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.cc-preview-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.1s ease;
}

.cc-preview-action-btn:hover {
    transform: translateY(-1px);
}

.cc-preview-action-primary {
    background: linear-gradient(180deg, #2c6fd6 0%, #1f5abb 100%);
    color: #fff;
    border-color: #1f5abb;
}

.cc-preview-action-primary:hover {
    background: linear-gradient(180deg, #2563c8 0%, #194fa6 100%);
    color: #fff;
}

.cc-preview-action-secondary {
    background: #f8fbff !important;
    border-color: #9fb5d1 !important;
    color: #1f4f95 !important;
}

/* .cc-btn-full — defined in Addon UI Unification section below */

.cc-back-link {
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 20px;
    color: var(--cc-blue);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    transition: 0.2s;
}

.cc-back-link:hover {
    color: #000;
    transform: translateX(-3px);
}

.cc-back-link .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Scrollbars & Hints */
.cc-size-grid::-webkit-scrollbar,
.cc-options-container::-webkit-scrollbar {
    width: 5px;
}

.cc-size-grid::-webkit-scrollbar-thumb,
.cc-options-container::-webkit-scrollbar-thumb {
    background: #ccc;
}

/* Size selected summary */
.cc-size-selected-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0;
    padding: 12px 15px;
}

.cc-size-selected-text {
    font-weight: 700;
    font-size: 1.05em;
    color: var(--cc-accent);
}

.cc-size-change-link {
    background: none;
    border: none;
    color: var(--cc-accent);
    font-size: 0.88em;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    flex-shrink: 0;
}

/* Add Text button visibility managed by .cc-add-text-btn class in new flow */

/* Done button in modal — CSS class */
#cc-done-btn {
    background: var(--cc-blue);
    border: none;
    padding: 14px 28px;
    font-weight: 800;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 113, 161, 0.4);
    min-width: 140px;
    justify-content: center;
    transition: background 0.2s;
}

#cc-done-btn:hover {
    background: var(--cc-blue-dark);
}

.cc-text-controls-panel::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to left, #111, transparent);
    pointer-events: none;
    z-index: 2;
}

/* ========================================
   MOBILE (max-width: 768px)
   ======================================== */
@media (max-width: 768px) {
    .cc-modal-container {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
    }

    .cc-step {
        height: 100%;
    }

    .cc-full-editor {
        height: 100%;
    }

    .cc-split-layout {
        flex-direction: column;
        height: auto;
        min-height: 100%;
    }

    .cc-left-col {
        flex: 0 0 auto;
        height: 60vh;
        border-right: none;
        border-bottom: 2px solid #222;
    }

    .cc-right-col {
        flex: 1 0 auto;
        min-height: 400px;
    }

    .cc-editor-main {
        padding: 10px;
    }

    .cc-floating-action {
        top: 10px;
        left: 10px;
        padding: 8px 12px;
        font-size: 10px;
    }

    /* Bottom Bar: stacked layout */
    .cc-bottom-bar {
        flex-direction: row;
        gap: 0;
        padding: 0;
        --cc-bar-h: 48px;
    }

    .cc-bottom-bar__inner {
        padding: 8px 10px;
        gap: 4px;
        display: grid;
        grid-template-columns: 1fr;
        width: min(100%, 360px);
        max-width: 360px;
        justify-items: center;
        align-content: start;
        padding: 8px 0 calc(env(safe-area-inset-bottom, 0px) + 24px);
        gap: 8px;
    }

    .cc-tool-group {
        width: 100%;
        justify-content: center;
        gap: 10px;
    }

    .cc-tool-item>span {
        display: none;
    }

    .cc-btn-group {
        gap: 8px;
    }

    .cc-icon-btn {
        width: 44px;
        height: 44px;
        background: rgba(255, 255, 255, 0.08);
    }

    .cc-action-group {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }

    .cc-toggle-switch {
        width: 100%;
        justify-content: center;
    }

    .cc-btn-done {
        width: 100%;
        padding: 14px;
        font-size: 15px;
    }

    /* Add Text button — minimum tap target */
    #cc-add-text-btn {
        font-size: 12px !important;
        padding: 10px 14px !important;
        min-height: 44px;
    }

    /* On-page: tighter padding on narrow screens */
    .cc-options-container {
        padding: 16px;
    }

    /* Addon grid: 2 columns on mobile (was 3) */
    .cc-addon-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Size item: minimum tap target */
    .cc-size-item {
        min-height: 56px;
        padding: 14px 16px;
    }

    /* Preview actions: overlay on top of preview image */
    .cc-page-preview-actions {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        margin-bottom: 0;
        padding: 10px 12px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, transparent 100%);
        border-radius: 0;
    }

    .cc-preview-action-btn {
        width: auto;
        padding: 8px 14px;
        font-size: 0.8em;
    }

    .cc-preview-action-secondary {
        color: rgba(255, 255, 255, 0.7);
        border-color: rgba(255, 255, 255, 0.3);
        background: rgba(0, 0, 0, 0.3);
    }

    /* Text Controls: fixed bottom sheet on mobile */
    .cc-text-controls-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        border-radius: 0;
        padding-bottom: env(safe-area-inset-bottom, 8px);
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
        z-index: 9999;
    }

    .cc-font-btn {
        min-width: 80px;
        padding: 6px 12px;
        font-size: 12px;
    }

    /* Tutorial */
    .cc-tutorial-card {
        width: 85%;
        padding: 25px 18px;
    }

    .cc-tutorial-card p {
        font-size: 13px;
        line-height: 1.5;
    }

    /* Size Grid */
    .cc-on-page-size-grid {
        grid-template-columns: 1fr;
    }

    /* Relocated text tools in toolbar */
    .cc-mobile-text-tools {
        opacity: 1;
    }

    .cc-mobile-text-tools #cc-text-color-picker {
        width: 44px;
        height: 44px;
        background: rgba(255, 255, 255, 0.08);
        padding: 6px;
    }

    .cc-mobile-text-tools #cc-remove-text-btn {
        width: 44px;
        height: 44px;
    }

    /* Child Modal */
    .cc-child-modal-content {
        padding: 20px;
    }

    .cc-prompt-actions {
        flex-direction: column;
    }
}

/* ============================================================
       NEW FLOW — Product Page Widgets
       ============================================================ */

/* в”Ђв”Ђ Tooltip button (в„№ icon) в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
/* High specificity + !important to defeat WC/theme button resets */
.cc-on-page-container button.cc-tooltip-btn,
.cc-on-page-container .cc-tooltip-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    padding: 0 !important;
    margin: 0 0 0 4px !important;
    border-radius: 0;
    border: 1.5px solid #d1d5db !important;
    background: #fff !important;
    background-color: #fff !important;
    color: #6b7280 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-size: 0 !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    transition: background .15s, border-color .15s, color .15s !important;
    outline: none !important;
}

.cc-on-page-container button.cc-tooltip-btn:hover,
.cc-on-page-container .cc-tooltip-btn:hover {
    background: #f3f4f6 !important;
    background-color: #f3f4f6 !important;
    border-color: #9ca3af !important;
    color: #374151 !important;
}

.cc-on-page-container .cc-tooltip-btn svg {
    display: block !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
}

/* в”Ђв”Ђ Personalize Button в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

/* Personalize button */
.cc-personalize-btn {
    width: 100%;
}

#cc-shape-selector {
    margin: 14px 0 8px;
}

.cc-shape-selector__heading {
    margin-bottom: 10px;
}

.cc-shape-selector__title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #1e3a5f;
}

.cc-shape-selector__list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cc-shape-selector__list::-webkit-scrollbar {
    display: none;
}

.cc-shape-selector--carousel,
.cc-size-selector--carousel {
    --cc-carousel-card-width: 120px;
    --cc-carousel-card-height: 120px;
}

.cc-carousel {
    position: relative;
}

.cc-carousel.is-active {
    display: block;
}

.cc-carousel__track {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    cursor: grab;
    user-select: none;
}

.cc-carousel__track--dragging {
    cursor: grabbing;
    scroll-snap-type: none !important;
}

.cc-shape-selector--carousel .cc-shape-selector__list {
    gap: 12px;
    padding: 2px 2px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.cc-shape-selector--carousel .cc-shape-item {
    width: var(--cc-carousel-card-width);
    min-width: var(--cc-carousel-card-width);
    min-height: var(--cc-carousel-card-height);
    scroll-snap-align: start;
    justify-content: center;
}

.cc-shape-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 12px 10px;
    border: 1px solid #d7dee8;
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    color: #243246;
    min-width: 88px;
    flex-shrink: 0;
    transition: border-color .18s, background .18s, box-shadow .18s, transform .18s;
    background: #fff;
}

.cc-shape-item:hover {
    border-color: #9eb8d8;
    background: #fbfdff;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .08);
}

.cc-shape-item.active {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, .18);
}

.cc-shape-item.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #2563eb;
}

.cc-shape-item__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-shape-item__icon svg {
    width: 44px;
    height: 44px;
}

.cc-shape-item__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
}

.cc-shape-item__icon-fallback {
    font-size: 13px;
    font-weight: 700;
    color: #555;
}

.cc-shape-item__label {
    font-size: 12px;
    font-weight: 700;
    color: #39485c;
    white-space: normal;
    line-height: 1.25;
    text-align: center;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-shape-item.active .cc-shape-item__label {
    color: #1d4ed8;
}

.cc-shape-item.active .cc-shape-item__icon,
.cc-shape-item.active .cc-shape-item__icon-fallback {
    color: #2563eb;
}

/* ── Size Selector (product page — radio list) ──────────── */
#cc-size-selector {
    margin: 10px 0 14px;
}

.cc-size-selector__head {
    margin-bottom: 8px;
}

.cc-size-selector__title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #1e3a5f;
}

/* в”Ђв”Ђ Size List container в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-size-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    overflow: hidden;
    background: #fff;
}

.cc-size-selector--carousel .cc-size-list {
    flex-direction: row;
    gap: 12px;
    border: none;
    background: transparent;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 10px;
    scroll-snap-type: x mandatory;
}

.cc-size-selector--carousel .cc-size-row {
    flex: 0 0 var(--cc-carousel-card-width);
    width: var(--cc-carousel-card-width);
    min-height: var(--cc-carousel-card-height);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 10px;
    border: 1px solid #d7dee8;
    border-left: 1px solid #d7dee8;
    border-bottom: 1px solid #d7dee8;
    border-radius: 0;
    background: #fff;
    scroll-snap-align: start;
    overflow: visible;
    color: #243246;
    transition: border-color .18s, background .18s, box-shadow .18s, transform .18s;
}

.cc-size-selector--carousel .cc-size-row:hover {
    border-color: #9eb8d8;
    background: #fbfdff;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .08);
}

.cc-size-selector--carousel .cc-size-row.active {
    border-color: #2563eb;
    border-bottom-color: #2563eb;
    background: #eff6ff;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .18);
    z-index: 1;
}

.cc-size-selector--carousel .cc-size-row.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #2563eb;
}

.cc-size-selector--carousel .cc-size-row.active::after {
    display: none;
}

.cc-size-selector--carousel .cc-size-row__dot,
.cc-size-selector--carousel .cc-size-row__chevron,
.cc-size-selector--carousel .cc-size-badge,
.cc-size-selector--carousel .cc-size-row__people {
    display: none;
}

.cc-size-selector--carousel .cc-size-row__body {
    flex: 0 0 auto;
    gap: 4px;
    align-items: center;
    text-align: center;
}

.cc-size-selector--carousel .cc-size-row__title-wrap {
    display: block;
    text-align: center;
}

.cc-size-selector--carousel .cc-size-row__title {
    font-size: 16px;
    font-weight: 700;
    color: #39485c;
    line-height: 1.25;
}

.cc-size-selector--carousel .cc-size-row__sub {
    display: block;
    margin-top: 2px;
    text-align: center;
    font-size: 11px;
    line-height: 1.35;
    color: #6b7280;
}

.cc-size-selector--carousel .cc-size-row__price {
    margin-left: 0;
    align-self: center;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    text-align: center;
}

.cc-size-selector--carousel .cc-size-row__price-reg {
    display: none;
}

.cc-size-selector--carousel .cc-size-row__price-sale {
    font-size: 20px;
    font-weight: 700;
    color: #2563eb;
    line-height: 1.25;
}

.cc-size-selector--carousel .cc-size-row.active .cc-size-row__price-sale {
    color: #1570c9;
}

.cc-size-selector--carousel .cc-size-row.active .cc-size-row__title,
.cc-size-selector--carousel .cc-size-row.active .cc-size-row__price-reg {
    color: #1570c9;
}

@media (max-width: 767px) {
    .cc-shape-selector--carousel,
    .cc-size-selector--carousel {
        --cc-carousel-card-width: 120px;
        --cc-carousel-card-height: 120px;
    }

    .cc-size-selector--carousel .cc-size-list {
        gap: 10px;
        padding-bottom: 8px;
    }

    .cc-size-selector--carousel .cc-size-row {
        padding: 12px 10px;
    }

    .cc-size-selector--carousel .cc-size-row__title {
        font-size: 12px;
    }

    .cc-size-selector--carousel .cc-size-row__price-sale {
        font-size: 18px;
    }
}

/* в”Ђв”Ђ Size Row в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-size-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #d7dee8;
    border-radius: 0;
    cursor: pointer;
    transition: border-color .18s, background .18s, box-shadow .18s, transform .18s;
    overflow: hidden;
    margin: 0;
    background: #fff;
}

.cc-size-row:hover {
    border-color: #9eb8d8;
    background: #fbfdff;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .08);
}

.cc-size-row.active {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, .18);
}

/* Step 4 keeps the original line-style size rows inside the accordion shell */
.cc-size-accordion .cc-size-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: none;
    border-bottom: 1px solid #f0f0f1;
    border-left: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: background .12s, border-left-color .12s;
}

.cc-size-accordion .cc-size-row:last-child {
    border-bottom: none;
}

.cc-size-accordion .cc-size-row:hover {
    border-color: transparent;
    background: #f9f9f9;
    box-shadow: none;
}

.cc-size-accordion .cc-size-row.active {
    border-color: transparent;
    background: #eff6ff;
    border-left-color: #2563eb;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .12);
}

.cc-size-accordion .cc-size-row__dot {
    border-color: #cbd5e1;
    background: #fff;
}

.cc-size-accordion .cc-size-row.active .cc-size-row__dot {
    border-color: #2563eb;
    background: #fff;
}

.cc-size-accordion .cc-size-row__dot-inner {
    display: block;
    width: 10px;
    height: 10px;
    background: #2563eb;
    border-radius: 0;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity .15s, transform .15s;
}

.cc-size-accordion .cc-size-row.active .cc-size-row__dot-inner {
    opacity: 1;
    transform: scale(1);
}

.cc-size-row__radio {
    display: none;
}

/* Radio dot */
.cc-size-row__dot {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s;
    background: #fff;
    margin-top: 2px;
}

.cc-size-row.active .cc-size-row__dot {
    border-color: #2563eb;
    background: #eff6ff;
}

.cc-size-row__dot-inner {
    display: none;
}

.cc-size-row.active .cc-size-row__dot-inner {
    display: none;
}

/* Capacity / people column */
.cc-size-row__people {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 28px;
}

.cc-size-row__people-icon {
    width: 22px;
    height: 22px;
    color: #6b7280;
}

.cc-size-row.active .cc-size-row__people-icon {
    color: #2563eb;
}

.cc-size-row__people-count {
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    line-height: 1;
}

.cc-size-row.active .cc-size-row__people-count {
    color: #2563eb;
}

/* Body: title + badges + dimensions */
.cc-size-row__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cc-size-row__title-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cc-size-row__title {
    font-size: 14px;
    font-weight: 700;
    color: #111;
}

.cc-size-row__sub {
    font-size: 12px;
    color: #6b7280;
    display: block;
}

/* Price column */
.cc-size-row__price {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    text-align: right;
}

.cc-size-row__price-reg {
    font-size: 12px;
    color: #9ca3af;
    text-decoration: line-through;
    font-weight: 400;
}

.cc-size-row__price-sale {
    font-size: 15px;
    font-weight: 800;
    color: #111;
}

.cc-size-row.active .cc-size-row__price-sale {
    color: #2563eb;
}

/* ── Size Chips (Step 1 — horizontal card layout) ───────────── */
.cc-size-chips {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.cc-size-chips::-webkit-scrollbar {
    display: none;
}

/* Card overrides for .cc-size-row inside chips container */
.cc-size-chips .cc-size-chip {
    position: relative;
    flex: 1 0 110px;
    max-width: 175px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 10px 12px 12px;
    border: 2px solid var(--cc-border);
    border-bottom: 2px solid var(--cc-border) !important;
    border-left: 2px solid var(--cc-border) !important;
    border-radius: 0;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s, background .18s;
    box-sizing: border-box;
}

.cc-size-chips .cc-size-chip--bestseller {
    padding-top: 28px;
}

.cc-size-chips .cc-size-chip:hover {
    border-color: #9ca3af !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.cc-size-chips .cc-size-chip.active {
    border-color: #2563eb !important;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

/* Bestseller ribbon across top */
.cc-size-chip__ribbon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: #16a34a;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 4px 6px;
    line-height: 1;
}

/* Check circle (top-right, shown only when active) */
.cc-size-chip__check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 0;
    background: #2563eb;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .18s;
    flex-shrink: 0;
}

.cc-size-chips .cc-size-chip.active .cc-size-chip__check {
    opacity: 1;
}

.cc-size-chips .cc-size-chip--bestseller .cc-size-chip__check {
    top: 34px;
}

/* Name */
.cc-size-chip__name {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    line-height: 1.2;
    margin-bottom: 5px;
    padding-right: 22px;
    /* avoid overlapping check icon */
}

.cc-size-chips .cc-size-chip.active .cc-size-chip__name {
    color: #1d4ed8;
}

/* Discount badge row */
.cc-size-chip__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 18px;
    margin-bottom: 5px;
}

/* People + subtitle */
.cc-size-chip__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}

.cc-size-chip__people {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
}

.cc-size-chips .cc-size-chip.active .cc-size-chip__people {
    color: #3b82f6;
}

.cc-size-chip__sub {
    font-size: 11px;
    color: #9ca3af;
    line-height: 1.3;
}

/* Price at bottom */
.cc-size-chip__price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid #f3f4f6;
    width: 100%;
}

.cc-size-chip__price-reg {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 400;
    text-decoration: line-through;
}

.cc-size-chip__price-sale {
    font-size: 15px;
    font-weight: 800;
    color: #111;
}

.cc-size-chips .cc-size-chip.active .cc-size-chip__price-sale {
    color: #2563eb;
}

/* в”Ђв”Ђ Badges в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-size-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: .4px;
    line-height: 1.4;
    white-space: nowrap;
}

.cc-size-badge--discount {
    background: #fce7e7;
    color: #dc2626;
    border: 1px solid #fca5a5;
}

.cc-size-badge--bestseller {
    background: #dcfce7;
    color: #16a34a;
    border: 1px solid #86efac;
    font-size: 9px;
    padding: 2px 7px;
    letter-spacing: .4px;
    font-weight: 700;
}

.cc-size-badge--custom {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #86efac;
}

/* ============================================================
   BOTTOM BAR v2 — pill layout
   ============================================================ */

/* Frosted pill wrapping all action buttons (left side) */
.cc-bbar-pill {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    min-height: 46px;
    padding: 4px;
    background: rgba(13, 23, 35, 0.86);
    border: 1px solid rgba(191, 219, 254, 0.12);
    border-radius: 0;
}

/* Icon/action buttons inside the pill */
.cc-bbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    color: #cdd9e8;
    border-radius: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.12s;
}

.cc-bbar-btn:hover {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(191, 219, 254, 0.16);
    color: #f8fbff;
}

.cc-bbar-btn:active {
    transform: translateY(1px);
}

.cc-bbar-btn svg {
    display: block;
    color: inherit;
    opacity: 0.94;
}

/* Photo button — wider, has icon + label */
.cc-bbar-btn--photo {
    width: auto;
    min-width: 78px;
    padding: 0 12px;
    gap: 8px;
    color: #f8fbff;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(191, 219, 254, 0.16);
}

.cc-bbar-btn__label {
    color: #f8fbff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
}

/* Separator inside pill */
.cc-bbar-sep {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, .1);
    margin: 0 3px;
    flex-shrink: 0;
}

/* Right-side wrapper */
.cc-bbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Keep-BG toggle — reuses .cc-bar-btn--toggle for JS active-class hook */
.cc-bbar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 44px;
    min-width: 176px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2px;
    transition: background .14s, border-color .18s;
    box-sizing: border-box;
}

/* .cc-bbar-toggle:hover { */
.cc-bbar-toggle {
    background: rgba(255, 255, 255, .1) !important;
    border-color: rgba(255, 255, 255, .18) !important;
}

.cc-bbar-toggle.active {
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(96, 165, 250, 0.48);
}

.cc-bbar-toggle.active .cc-toggle-label {
    color: #dbeafe;
}

.cc-bbar-toggle.active .cc-bbar-price {
    color: #93c5fd;
}

.cc-bbar-toggle.active .cc-toggle-switch {
    background: #2563eb;
}

.cc-bbar-toggle.active .cc-toggle-switch__thumb {
    transform: translateX(16px);
}

.cc-bbar-toggle__meta {
    display: inline-flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 1px;
}

/* Toggle label */
.cc-toggle-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.88);
    text-transform: none;
    transition: color .2s;
}

.cc-bbar-price {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.48);
    letter-spacing: 0;
}

.cc-bbar-price .woocommerce-Price-amount {
    color: inherit;
}

/* Save CTA */
.cc-bbar-save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    min-height: 44px;
    padding: 0 18px;
    background: #0f7aa8;
    border: none;
    border-radius: 0;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: none;
    transition: background .13s, transform .1s;
}

.cc-bbar-save:hover {
    background: #0c6992;
    box-shadow: none;
    transform: none;
}

.cc-bbar-save:active {
    transform: translateY(1px);
}

.cc-bbar-save svg {
    display: block;
}

/* Mobile */
@media (max-width: 480px) {
    .cc-bbar-sep {
        height: auto;
    }

    .cc-bbar-pill {
        gap: 0;
        padding: 3px;
    }

    .cc-bbar-btn {
        width: 30px;
        height: 30px;
    }

    .cc-bbar-btn--photo {
        padding: 0 7px;
    }

    .cc-bbar-btn__label {
        display: none;
    }

    .cc-bbar-sep {
        margin: 0 1px;
    }

    .cc-bbar-toggle {
        padding: 0 8px;
        gap: 6px;
        height: 34px;
    }

    .cc-bbar-save {
        padding: 0 14px;
        height: 34px;
        font-size: 12px;
    }
}

/* ============================================================
   NEW FLOW — Editor Bottom Bar
   ============================================================ */
.cc-bottom-bar__inner {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    max-width: 980px;
    margin: 0 auto;
    width: 100%;
    padding: 12px 16px 14px;
    gap: 12px;
    flex-wrap: nowrap;
    box-sizing: border-box;
}

.cc-bottom-bar__group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cc-bottom-bar__sep {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, .15);
    margin: 0 4px;
}

/* в”Ђв”Ђ Bar Buttons в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    border-radius: 0;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}

.cc-bar-btn:hover {
    background: rgba(255, 255, 255, .18);
}

.cc-bar-btn svg {
    flex-shrink: 0;
}

.cc-bar-btn--icon {
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
}

.cc-bar-btn--text {
    padding: 8px 14px;
    font-size: 12px;
}

.cc-bar-btn--toggle {
    padding: 7px 12px;
    font-size: 12px;
    gap: 8px;
}

/* Toggle label */
.cc-toggle-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2px;
    color: rgba(255, 255, 255, .75);
    transition: color .2s;
}

/* Toggle switch track */
.cc-toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 34px;
    height: 20px;
    border-radius: 0;
    background: rgba(255, 255, 255, .2);
    flex-shrink: 0;
    transition: background .2s;
}

/* Toggle switch thumb */
.cc-toggle-switch__thumb {
    position: absolute;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 0;
    background: rgba(255, 255, 255, .6);
    transition: transform .2s, background .2s;
}

/* Active (Keep BG ON) */
.cc-bar-btn--toggle.active {
    background: rgba(255, 196, 0, .12);
    border-color: rgba(255, 196, 0, .6);
}

.cc-bar-btn--toggle.active .cc-toggle-label {
    color: #ffc400;
}

.cc-bar-btn--toggle.active .cc-toggle-switch {
    background: #ffc400;
}

.cc-bar-btn--toggle.active .cc-toggle-switch__thumb {
    transform: translateX(14px);
    background: #fff;
}

.cc-bar-btn--toggle.active .cc-bar-btn__price {
    color: #ffc400;
    opacity: 1;
}

.cc-bar-btn__price {
    font-size: 11px;
    font-weight: 700;
    opacity: .8;
}

.cc-bar-btn--save {
    background: #ffc400;
    border-color: #ffc400;
    color: #000;
    padding: 8px 22px;
    font-size: 14px;
    font-weight: 800;
    border-radius: 0;
}

.cc-bar-btn--save:hover {
    background: #e6b000;
    border-color: #e6b000;
}

/* в”Ђв”Ђ ADD TEXT button (top-left of canvas) в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-add-text-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 120;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(20, 20, 20, .88);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 0;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background .15s, opacity .15s;
    white-space: nowrap;
}

.cc-add-text-btn:hover {
    background: rgba(50, 50, 50, .92);
}

.cc-add-text-btn--disabled,
.cc-add-text-btn:disabled {
    opacity: .38;
    cursor: not-allowed;
    pointer-events: none;
}

/* в”Ђв”Ђ Font panel layout в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-font-delete-btn {
    flex-shrink: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 14px;
    background: transparent;
    border: none;
    color: #e05252;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s;
    min-width: 56px;
}

.cc-font-delete-btn:hover {
    background: rgba(224, 82, 82, .14);
    color: #ff6b6b;
}

.cc-font-delete-btn svg {
    flex-shrink: 0;
}

/* Vertical divider between delete and font list */
.cc-font-panel__divider {
    flex-shrink: 0;
    width: 1px;
    background: #333;
    margin: 8px 0;
    align-self: stretch;
}

/* в”Ђв”Ђ Text status read-only input fields (step-4) в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-text-status-fields {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cc-text-status-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.cc-text-status__input {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    font-size: 13px;
    background: #f9fafb;
    color: #374151;
    cursor: default;
    outline: none;
}

.cc-text-status__input:focus {
    border-color: #d1d5db;
}

/* ============================================================
   NEW FLOW — After-Save: Preview Block
   ============================================================ */
.cc-gallery-replacement {
    margin-bottom: 0;
}

.cc-page-preview-inner {
    position: relative;
    border-radius: 0;
    overflow: hidden;
}

#cc-page-preview-img {
    display: block;
    width: auto;
    max-width: 100%;
    border-radius: 0;
}

.cc-page-preview-actions {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: auto;
    flex-wrap: nowrap;
}

.cc-preview-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 18px;
    min-height: 40px;
    flex: 1 1 0;
    border-radius: 0;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .1s ease;
    border: 1px solid;
}

.cc-preview-action-primary {
    background: linear-gradient(180deg, #2c6fd6 0%, #1f5abb 100%);
    color: #fff;
    border-color: #1f5abb;
}

.cc-preview-action-primary:hover {
    background: linear-gradient(180deg, #2563c8 0%, #194fa6 100%);
    border-color: #194fa6;
    color: #fff;
}

/* ============================================================
   NEW FLOW — After-Save: Size Accordion
   ============================================================ */
.cc-size-accordion {
    border: 1px solid #e5e7eb;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 16px;
    background: #fff;
}

.cc-size-accordion__selected {
    cursor: pointer;
    padding: 14px 16px;
    border-bottom: 1px solid transparent;
    transition: background .15s;
}

.cc-size-accordion__selected:hover {
    background: #f9f9f9;
}

.cc-size-accordion__preview {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cc-size-accordion__preview-check {
    width: 20px;
    height: 20px;
    background: #111;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Body: title-row + subtitle */
.cc-size-accordion__preview-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cc-size-accordion__preview-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cc-size-accordion__preview-title {
    font-size: 14px;
    font-weight: 700;
    color: #111;
}

.cc-size-accordion__preview-sub {
    font-size: 12px;
    color: #2563eb;
    font-weight: 600;
}

.cc-size-accordion__preview-price {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.cc-price-retail {
    text-decoration: line-through;
    color: #999;
    font-weight: 400;
    margin-right: 2px;
}

.cc-price-sale {
    color: #111;
    font-weight: 800;
}

.cc-size-accordion__preview-arrow {
    color: #777;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.cc-size-accordion__list {
    display: none;
}

.cc-size-accordion-item {
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f1;
    cursor: pointer;
    transition: background .15s;
}

.cc-size-accordion-item:last-child {
    border-bottom: none;
}

.cc-size-accordion-item:hover {
    background: #f9f9f9;
}

.cc-size-accordion-item.active {
    background: #f5f5f5;
}

.cc-size-accordion__radio {
    display: none;
}

.cc-size-accordion-item__inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cc-size-accordion-item__check {
    width: 18px;
    height: 18px;
    background: #e5e7eb;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}

.cc-size-accordion-item.active .cc-size-accordion-item__check {
    background: #111;
}

.cc-size-accordion-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cc-size-accordion-item__title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cc-size-accordion-item__title {
    font-size: 14px;
    font-weight: 700;
    color: #222;
}

.cc-size-accordion-item.active .cc-size-accordion-item__title {
    color: #111;
}

.cc-size-accordion-item__sub {
    font-size: 12px;
    color: #2563eb;
    font-weight: 600;
}

.cc-size-accordion-item__price {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    margin-left: auto;
    white-space: nowrap;
}

/* в”Ђв”Ђ Upsize button в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-upsize-wrapper {
    padding: 10px 14px;
    border-top: 1px solid #f0f0f1;
    background: #fafafa;
}

.cc-upsize-btn {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 1px solid var(--cc-border);
    border-radius: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--cc-accent);
    cursor: pointer;
    transition: all .2s;
}

.cc-upsize-btn:hover {
    background: #eff6ff;
    border-color: var(--cc-accent);
}

/* ── Simple Option — see Addon UI Unification section below ── */

/* в”Ђв”Ђ Toggle option row (Text Engraving / Keep Background) в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-opt-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--cc-border);
    border-radius: 0;
    background: #fff;
    margin-bottom: 10px;
    transition: border-color .2s, background .2s;
}

.cc-opt-row:hover {
    border-color: #d1d5db;
}

.cc-opt-row--active {
    border-color: var(--cc-active-border);
    background: var(--cc-active-bg);
}

.cc-opt-row__toggle {
    flex-shrink: 0;
    width: 40px;
    height: 22px;
    border-radius: 0;
    background: #d1d5db;
    position: relative;
    margin-top: 1px;
    transition: background .2s;
    cursor: pointer;
    user-select: none;
}

.cc-opt-row__toggle-thumb {
    position: absolute;
    left: 3px;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 0;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    transition: transform .2s;
}

.cc-opt-row--active .cc-opt-row__toggle {
    background: var(--cc-green);
}

.cc-opt-row--active .cc-opt-row__toggle-thumb {
    transform: translateX(18px);
}

.cc-opt-row__body {
    flex: 1;
    min-width: 0;
    line-height: 0;
}

.cc-opt-row__label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--cc-text-primary);
    line-height: 1.4;
}

.cc-opt-row__desc {
    font-size: 12px;
    color: var(--cc-text-secondary);
    margin: 2px 0 0;
    line-height: 1.45;
}

.cc-opt-row__price {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--cc-text-primary);
    white-space: nowrap;
    margin-top: 2px;
}

.cc-price-prefix {
    margin-right: 2px;
}

/* в”Ђв”Ђ BG Status Block (step-4, read-only, synced from editor) в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-bg-status-block {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--cc-border);
    border-radius: 0;
    background: #fff;
    margin-bottom: 10px;
    transition: border-color .2s, background .2s;
}

.cc-bg-status__icon-wrap {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    color: #9ca3af;
    transition: background .2s, color .2s;
}

.cc-bg-status__body {
    flex: 1;
    min-width: 0;
}

.cc-bg-status__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
}

.cc-bg-status__label {
    font-size: 14px;
    font-weight: 700;
    color: var(--cc-text-primary);
    transition: color .2s;
}

.cc-bg-status__price {
    font-size: 13px;
    font-weight: 700;
    color: var(--cc-text-primary);
    white-space: nowrap;
}

.cc-bg-status__desc {
    font-size: 12px;
    color: var(--cc-text-secondary);
    margin: 0;
    line-height: 1.45;
}

/* Read-only text engraving input — non-interactive */
.cc-text-status__input {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 4px 0;
    background: none;
    border: none;
    border-bottom: 1px dashed #d1d5db;
    font-size: 13px;
    color: #374151;
    pointer-events: none;
    user-select: none;
    outline: none;
    box-sizing: border-box;
}

/* Edit-link: small square icon button */
.cc-bg-status__edit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    width: 28px;
    height: 28px;
    border-radius: 0;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    flex-shrink: 0;
    padding: 0;
}

.cc-bg-status__edit-link--plus {
    font-size: 0;
}

.cc-bg-status__edit-link:hover {
    background: #e5e7eb;
    color: #111;
    border-color: #d1d5db;
}

.cc-opt-row--active .cc-bg-status__edit-link {
    background: #dcfce7;
    border-color: #86efac;
    color: #16a34a;
}

.cc-opt-row--active .cc-bg-status__edit-link:hover {
    background: #bbf7d0;
    color: #15803d;
}

/* State: BG removed (free, default) — green */
.cc-bg-status--removed {
    border-color: #d1fae5;
    background: #f0fdf4;
}

.cc-bg-status--removed .cc-bg-status__icon-wrap {
    background: #d1fae5;
    color: #16a34a;
}

.cc-bg-status--removed .cc-bg-status__label {
    color: #15803d;
}

/* State: BG kept (paid) — amber */
.cc-bg-status--kept {
    border-color: #fde68a;
    background: #fffbeb;
}

.cc-bg-status--kept .cc-bg-status__icon-wrap {
    background: #fde68a;
    color: #b45309;
}

.cc-bg-status--kept .cc-bg-status__label {
    color: #92400e;
}

.cc-bg-status--kept .cc-bg-status__price {
    color: #b45309;
}

/* State: neutral (no photo) — grey */
.cc-bg-status--neutral {
    opacity: .6;
}

/* State: upsell (prompt user to add/upgrade) — soft indigo */
.cc-bg-status--upsell {
    border-color: #c7d2fe;
    background: #eef2ff;
}

.cc-bg-status--upsell .cc-bg-status__icon-wrap {
    background: #e0e7ff;
    color: #4338ca;
}

.cc-bg-status--upsell .cc-bg-status__label {
    color: #3730a3;
}

/* CTA variant — pill button instead of plain link */
.cc-bg-status__edit-link--cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    padding: 8px 16px;
    background: #111;
    color: #fff !important;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    border: none;
    transition: background .15s, transform .1s;
    line-height: 1;
}

.cc-bg-status__edit-link--cta:hover {
    background: #333;
    transform: translateY(-1px);
}

.cc-engraving-textarea {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 0;
    padding: 10px;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
    min-height: 80px;
    margin-top: 12px;
    color: #333;
    font-family: inherit;
}

.cc-engraving-textarea:focus {
    outline: none;
    border-color: #0071a1;
}

.cc-engraving-counter {
    text-align: right;
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}

/* в”Ђв”Ђ On-page options container в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-on-page-container {
    margin-top: 0;
}

.cc-options-side {
    width: 100%;
}

.cc-options-container {
    padding: 0;
}

/* в”Ђв”Ђ Summary rows в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid #eee;
    margin-top: 8px;
}

.cc-grand-total {
    font-size: 1.1em;
    font-weight: 700;
    color: #111;
}

.cc-total-label {
    color: #333;
}

.cc-btn-full {
    width: 100%;
    text-align: center;
}

/* в”Ђв”Ђ Addons area в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-addons-area {
    margin-top: 8px;
}

/* ============================================================
   NEW FLOW — Mobile Responsive
   ============================================================ */
@media (max-width: 768px) {

    /* Override old bottom-bar mobile styles for new structure */
    .cc-editor-main {
        --cc-bar-h: 48px;
        flex: 1 1 auto;
        min-height: 0;
        aspect-ratio: auto;
        width: 100%;
        padding: 56px 12px 18px;
    }

    /* Compact bar buttons on small screens */
    .cc-bar-btn--text span {
        display: none;
    }

    .cc-bar-btn--text {
        padding: 0;
        width: 36px;
        height: 36px;
        justify-content: center;
    }

    .cc-bar-btn--icon {
        width: 34px;
        height: 34px;
    }

    .cc-bar-btn--toggle {
        padding: 5px 8px;
        gap: 6px;
    }

    .cc-toggle-label {
        font-size: 11px;
    }

    .cc-toggle-switch {
        width: 28px;
        height: 16px;
    }

    .cc-toggle-switch__thumb {
        width: 10px;
        height: 10px;
        left: 3px;
    }

    .cc-bar-btn--toggle.active .cc-toggle-switch__thumb {
        transform: translateX(12px);
    }

    .cc-bar-btn__price {
        font-size: 10px;
    }

    .cc-bar-btn--save {
        padding: 8px 16px;
        font-size: 13px;
    }

    .cc-bottom-bar__sep {
        display: none;
    }

    /* Size rows: compact on mobile */
    .cc-size-row {
        padding: 10px 12px;
        gap: 8px;
    }

    .cc-size-row__title {
        font-size: 13px;
    }

    .cc-size-row__sub {
        font-size: 11px;
    }

    .cc-size-row__price-sale {
        font-size: 14px;
    }

    .cc-size-row__people {
        min-width: 22px;
    }

    .cc-size-row__people-icon {
        width: 18px;
        height: 18px;
    }

    .cc-size-row__people-count {
        font-size: 9px;
    }

    .cc-size-badge {
        font-size: 9px;
        padding: 2px 5px;
    }

    /* Shape items: smaller on mobile */
    .cc-shape-item {
        min-width: 56px;
        padding: 8px 6px;
    }

    .cc-shape-item__icon {
        width: 32px;
        height: 32px;
    }

    .cc-shape-item__icon svg {
        width: 32px;
        height: 32px;
    }

    /* Preview actions: full width buttons */
    .cc-page-preview-actions {
        flex-direction: row !important;
    }

    .cc-preview-action-btn {
        width: 100%;
        justify-content: center;
    }

    /* Size accordion: compact */
    .cc-size-accordion__selected {
        padding: 12px 14px;
    }

    .cc-size-accordion-item {
        padding: 10px 14px;
    }
}

.cc-bg-status__edit-link {
    display: none !important;
}

/* в”Ђв”Ђ Addon UI Unification в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

/* Dynamic addon block shell */
.cc-dynamic-addon-block {
    margin-bottom: 10px;
    border: 1px solid var(--cc-border);
    border-radius: 0;
    padding: 14px 16px;
    background: #fff;
    transition: border-color .2s, background .2s;
}

/* cc-block--active visual styling intentionally removed */

/* Addon activate label — toggle pill via JS-injected .cc-addon-toggle */
.cc-addon-activate-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin: 0 0 12px;
}

.cc-addon-activate {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.cc-addon-title {
    font-size: 14px;
    font-weight: 700;
    color: #111;
}

/* Shared toggle pill for addon blocks */
.cc-addon-toggle {
    flex-shrink: 0;
    cursor: pointer;
}

.cc-addon-toggle.cc-toggle--on {
    background: var(--cc-green);
}

.cc-addon-toggle.cc-toggle--on .cc-opt-row__toggle-thumb {
    transform: translateX(18px);
}

/* Addon product grid */
.cc-addon-grid {
    display: grid;
    gap: 12px;
}

.cc-addon-card {
    display: block;
    cursor: pointer;
    border: 1px solid var(--cc-border);
    border-radius: 0;
    padding: 8px;
    height: 100%;
    transition: border-color .15s, box-shadow .15s;
    box-shadow: none;
    background: #fff;
}

.cc-addon-card:hover {
    border-color: #9ca3af;
}

.cc-addon-card--selected,
.cc-addon-card.cc-addon-card--active {
    border-color: var(--cc-green);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, .22);
}

/* в”Ђв”Ђ "No [Category]" deselect card в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-addon-card--none {
    border-style: dashed;
    border-color: #d1d5db;
    background: #fafafa;
}

.cc-addon-card--none:hover {
    border-color: #9ca3af;
    background: #f3f4f6;
}

.cc-addon-card--none.cc-addon-card--selected {
    border-color: #9ca3af;
    background: #f3f4f6;
    box-shadow: none;
}

.cc-addon-card--none .cc-addon-card-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: 14px 8px;
    height: 100%;
}

.cc-addon-none-label {
    font-size: 12px;
    font-style: italic;
    color: #6b7280;
    text-align: center;
    line-height: 1.4;
}

.cc-addon-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* в”Ђв”Ђ Image wrapper (needed for badge + checkmark positioning) в”Ђв”Ђв”Ђ */
.cc-addon-card-img-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    flex-shrink: 0;
}

.cc-addon-card-img-wrap img,
.cc-addon-card-inner img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 0;
    display: block;
    transition: transform .2s;
}

.cc-addon-card:hover .cc-addon-card-img-wrap img {
    transform: scale(1.03);
}

/* в”Ђв”Ђ Selected card: image tint + SVG checkmark bubble в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-addon-card--selected .cc-addon-card-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(22, 163, 74, .12);
    border-radius: 0;
    z-index: 1;
    pointer-events: none;
}

.cc-addon-card--selected .cc-addon-card-img-wrap::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 7px;
    width: 24px;
    height: 24px;
    border-radius: 0;
    background-color: #16a34a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1.5%2C6 4.5%2C9.5 10.5%2C2.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    z-index: 4;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
}

/* в”Ђв”Ђ Discount badge в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-addon-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #e53e3e;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    padding: 2px 6px;
    border-radius: 0;
    line-height: 1.5;
    z-index: 2;
    pointer-events: none;
    white-space: nowrap;
}

/* в”Ђв”Ђ Sale price display в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-addon-price del.cc-addon-price-orig {
    color: #9ca3af;
    font-weight: 400;
    text-decoration: line-through;
    margin-right: 3px;
    font-size: 11px;
}

.cc-addon-price ins.cc-addon-price-sale {
    color: #e53e3e;
    font-weight: 700;
    text-decoration: none;
}

.cc-addon-price-free {
    color: var(--cc-green);
    font-weight: 700;
}

/* в”Ђв”Ђ Add / Trash interaction в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-on-page-container button.cc-addon-add-btn.cc-addon-add-btn--hidden,
.cc-on-page-container .cc-addon-add-btn.cc-addon-add-btn--hidden {
    display: none !important;
}

.cc-on-page-container button.cc-addon-add-btn,
.cc-on-page-container .cc-addon-add-btn {
    display: block !important;
    margin-top: 6px !important;
    width: 100% !important;
    padding: 7px 0 !important;
    margin-bottom: 0 !important;
    background: var(--cc-blue-dark) !important;
    background-color: var(--cc-blue-dark) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .3px !important;
    cursor: pointer !important;
    transition: background .15s !important;
    box-shadow: none !important;
    text-shadow: none !important;
    line-height: 1.4 !important;
}

.cc-on-page-container button.cc-addon-add-btn:hover,
.cc-on-page-container .cc-addon-add-btn:hover {
    background: #16a34a !important;
    background-color: #16a34a !important;
}

/* cc-qty-trash removed — stepper uses standard −/+ buttons */
.cc-addon-card-info {
    margin-top: 8px;
}

.cc-addon-price {
    font-size: 12px;
    font-weight: 700;
    color: #111;
    display: block;
}

.cc-addon-name {
    font-size: 12px;
    line-height: 1.3;
    display: block;
    margin-top: 4px;
    color: #555;
}

/* Quantity stepper */
.cc-addon-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--cc-border-light);
}

.cc-addon-qty-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.cc-qty-stepper {
    display: flex;
    align-items: center;
    border: 1px solid var(--cc-border);
    border-radius: 0;
    overflow: hidden;
    height: 32px;
}

.cc-qty-minus,
.cc-qty-plus {
    width: 32px;
    height: 32px;
    background: #f9fafb;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    flex-shrink: 0;
    line-height: 1;
}

.cc-qty-minus:hover,
.cc-qty-plus:hover {
    background: #f3f4f6;
}

.cc-qty-input {
    width: 40px;
    height: 32px;
    border: none;
    border-left: 1px solid var(--cc-border);
    border-right: 1px solid var(--cc-border);
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--cc-text-primary);
    -moz-appearance: textfield;
    appearance: textfield;
    background: #fff;
}

.cc-qty-input::-webkit-inner-spin-button,
.cc-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

/* Ultra HD Engraving — matches .cc-opt-row visually */
.cc-simple-option {
    margin-bottom: 10px;
}

.cc-simple-option__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--cc-border);
    border-radius: 0;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

.cc-simple-option__check {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.cc-simple-option__body {
    flex: 1;
    min-width: 0;
}

.cc-simple-option__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cc-simple-option__label {
    font-size: 14px;
    font-weight: 700;
    color: var(--cc-text-primary);
}

.cc-simple-option__price {
    font-size: 13px;
    font-weight: 700;
    color: var(--cc-text-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

.cc-simple-option__desc {
    font-size: 12px;
    color: var(--cc-text-secondary);
    margin-top: 3px;
    display: block;
}

.cc-simple-option__content {
    padding: 0 16px 14px;
    border-top: 1px solid var(--cc-border-light);
    display: none;
}

.cc-simple-option--active .cc-simple-option__row {
    border-color: var(--cc-active-border);
    background: var(--cc-active-bg);
}

/* Special Instructions */
.cc-si-block {
    margin-bottom: 10px;
    border: 1px solid var(--cc-border);
    border-radius: 0;
    padding: 14px 16px;
    background: #fff;
}

.cc-si-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--cc-text-primary);
}

#cc-si-global-textarea {
    display: none;
    margin-top: 12px;
    width: 100%;
    min-height: 90px;
    border: 1px solid var(--cc-border);
    border-radius: 0;
    padding: 10px;
    font-size: 13px;
    box-sizing: border-box;
    resize: vertical;
    color: var(--cc-text-secondary);
    font-family: inherit;
    transition: border-color .15s;
}

#cc-si-global-textarea:focus {
    outline: none;
    border-color: #9ca3af;
}

/* Summary rows */
.cc-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 13px;
    color: var(--cc-text-secondary);
}

.cc-grand-total {
    font-size: 16px;
    font-weight: 800;
    color: var(--cc-text-primary);
    border-top: 1px solid var(--cc-border);
    padding-top: 10px;
    margin-top: 4px;
}

/* в”Ђв”Ђ Hide native inputs inside addon cards в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-addon-card .cc-addon-radio,
.cc-addon-card .cc-addon-checkbox,
.cc-addon-single-row .cc-addon-radio,
.cc-addon-single-row .cc-addon-checkbox,
.cc-addon-activate-label .cc-addon-activate,
.cc-si-label .cc-addon-activate {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* в”Ђв”Ђ Addon activate header (toggle + optional tooltip) в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-addon-activate-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.cc-addon-activate-header .cc-addon-activate-label {
    margin: 0;
}

/* в”Ђв”Ђ Label wrap (label + tooltip btn inline) в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-opt-row__label-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* в”Ђв”Ђ Addon grid column helpers в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-addon-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

.cc-addon-grid--3col {
    grid-template-columns: repeat(3, 1fr);
}

/* ── Addon card inner — new order: img / name / price / desc / qty ────────── */
.cc-addon-card-img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

.cc-addon-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
    flex: 1;
}

.cc-addon-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--cc-text-primary);
    line-height: 1.3;
    display: block;
}

.cc-addon-price {
    font-size: 12px;
    font-weight: 700;
    color: var(--cc-accent);
    display: block;
}

.cc-addon-desc {
    font-size: 11px;
    color: var(--cc-text-secondary);
    margin: 2px 0 0;
    line-height: 1.4;
    display: block;
}

/* в”Ђв”Ђ Per-card qty (inside card, shown only when selected) в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-card-qty {
    margin-top: 8px;
    display: flex;
    justify-content: center;
}

.cc-qty-stepper--sm {
    height: 28px;
}

.cc-qty-stepper--sm .cc-qty-minus,
.cc-qty-stepper--sm .cc-qty-plus {
    width: 26px;
    height: 28px;
    font-size: 14px;
    background: var(--cc-bg-soft);
}

.cc-qty-stepper--sm .cc-qty-input {
    width: auto;
    min-width: 0;
    height: 28px;
    font-size: 12px;
    padding: 0 6px;
}

/* в”Ђв”Ђ Addon single-row list layout в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-addon-single-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cc-addon-single-row {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    border: 1px solid var(--cc-border);
    border-radius: 0;
    padding: 10px 12px;
    transition: border-color .15s, box-shadow .15s;
    background: #fff;
    justify-content: space-between;
}

.cc-addon-single-row:hover {
    border-color: #9ca3af;
}

.cc-addon-single-row--none {
    border-style: dashed;
    border-color: #d1d5db;
    background: #fafafa;
}

.cc-addon-single-row--none:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.cc-addon-single-row--none .cc-addon-none-label {
    padding: 2px 0;
}

.cc-addon-single-row.cc-addon-card--selected {
    border-color: var(--cc-green);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, .22);
}

.cc-addon-single-row--base-none.cc-addon-card--selected,
.cc-addon-card--base-none.cc-addon-card--selected {
    border-color: var(--cc-green);
    background: #f0fdf4;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, .22);
}

.cc-addon-single-img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 0;
    flex-shrink: 0;
}

.cc-addon-single-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cc-addon-single-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 10px;
    flex-shrink: 0;
}

.cc-card-qty--single {
    margin-top: 0;
}

.cc-addon-single-link {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cc-text-primary);
    background: transparent;
    text-decoration: none;
    transition: background .15s, color .15s, transform .15s;
}

.cc-addon-single-link svg {
    width: 20px;
    height: 20px;
}

.cc-addon-single-link:hover {
    color: #2563eb;
    background: rgba(37, 99, 235, .08);
    transform: translateY(-1px);
}


/* в”Ђв”Ђ Tooltip modal overlay в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-tip-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.cc-tip-modal.cc-tip-modal--open {
    display: flex;
}

.cc-tip-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(2px);
}

.cc-tip-modal__box {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 0;
    padding: 28px 24px 24px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
    animation: cc-tip-in .18s ease;
}

.cc-tip-modal.cc-tip-modal--rich .cc-tip-modal__box {
    max-width: 760px;
    padding-top: 24px;
}

@keyframes cc-tip-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.97);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.cc-tip-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    background: #fff;
    color: #6b7280;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    padding: 0;
    line-height: 1;
}

.cc-tip-modal__close:hover {
    background: #f3f4f6;
    color: #111;
}

.cc-tip-modal__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--cc-text-primary);
    margin: 0 0 12px;
}

.cc-tip-modal__title--hidden {
    display: none;
}

.cc-tip-modal__body {
    font-size: 13px;
    line-height: 1.65;
    color: var(--cc-text-secondary);
}

.cc-tip-modal__body p {
    margin: 0 0 8px;
}

.cc-tip-modal__body p:last-child {
    margin: 0;
}

.cc-tip-modal__body ul,
.cc-tip-modal__body ol {
    margin: 0 0 8px;
    padding-left: 20px;
}

.cc-tip-modal__body li {
    margin-bottom: 4px;
}

.cc-tip-modal__body img {
    display: block;
    max-width: 100%;
    height: auto;
}

.cc-tip-modal__body h2,
.cc-tip-modal__body h3,
.cc-tip-modal__body h4 {
    margin: 0 0 10px;
    color: var(--cc-text-primary);
    line-height: 1.2;
}

.cc-tip-modal__body .cc-tip-panel {
    margin: -28px -24px 18px;
    padding: 24px 24px 20px;
    background: #1f252b;
    color: #fff;
}

.cc-tip-modal__body .cc-tip-panel h2,
.cc-tip-modal__body .cc-tip-panel h3,
.cc-tip-modal__body .cc-tip-panel h4,
.cc-tip-modal__body .cc-tip-panel p,
.cc-tip-modal__body .cc-tip-panel li,
.cc-tip-modal__body .cc-tip-panel figcaption,
.cc-tip-modal__body .cc-tip-panel span {
    color: inherit;
}

.cc-tip-modal__body .cc-tip-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.cc-tip-modal__body .cc-tip-compare__item {
    text-align: center;
}

.cc-tip-modal__body .cc-tip-compare__title {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
}

.cc-tip-modal__body .cc-tip-compare__media {
    margin: 0;
}

.cc-tip-modal__body .cc-tip-compare__media img {
    width: 100%;
}

.cc-tip-modal__body .cc-tip-copy {
    color: var(--cc-text-primary);
}

.cc-tip-modal__body .cc-tip-copy p {
    margin-bottom: 12px;
}

@media (max-width: 640px) {
    .cc-tip-modal__body .cc-tip-panel {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -24px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .cc-tip-modal__body .cc-tip-compare {
        grid-template-columns: 1fr;
    }

    .cc-tip-modal__body .cc-tip-compare__title {
        font-size: 18px;
    }
}

/* в”Ђв”Ђ Summary detail rows в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-summary-details {
    margin-top: 8px;
}

.cc-summary-row--detail {
    padding: 4px 0;
    border-top: none;
    margin-top: 0;
    font-size: 13px;
}

.cc-summary-row--detail:first-child {
    border-top: 1px solid #eee;
    margin-top: 8px;
}

.cc-summary-label {
    color: var(--cc-text-secondary);
}

.cc-summary-value {
    font-weight: 600;
    color: var(--cc-text-primary);
}

/* Add to Cart full-width */
.cc-btn-full {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 14px;
}

/* ============================================================
   SIZE LIST — Collapse / expand interaction
   ============================================================ */

/* Hide non-active rows when list is collapsed */
.cc-size-list--collapsed .cc-size-row:not(.active) {
    display: none;
}

/* Collapsed active row: remove bottom border, signal clickability */
.cc-size-list--collapsed .cc-size-row.active {
    border-bottom: none;
    cursor: pointer;
    border-radius: 0;
}

/* Rounded corners on the list itself when only one row is visible */
.cc-size-list--collapsed {
    border-radius: 0;
}

/* Chevron indicator — hidden by default (expanded state) */
.cc-size-row__chevron {
    flex-shrink: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #9ca3af;
    margin-left: 4px;
    margin-top: 2px;
    transition: transform .2s;
}

/* Show chevron (pointing down) on active row when collapsed в†’ "tap to change" */
.cc-size-list--collapsed .cc-size-row.active .cc-size-row__chevron {
    display: flex;
}

/* Rotate chevron up when list is expanded and row is active */
.cc-size-list:not(.cc-size-list--collapsed) .cc-size-row.active .cc-size-row__chevron {
    display: flex;
    transform: rotate(180deg);
    color: #2563eb;
}

/* Bestseller ribbon on vertical rows */
.cc-size-row__ribbon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: #16a34a;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 4px 6px;
    line-height: 1;
    pointer-events: none;
}

/* Row with bestseller ribbon needs top padding to clear the ribbon */
.cc-size-row--bestseller {
    position: relative;
    /* padding-top: 28px; */
    overflow: hidden;
}

/* Upsize wrapper outside accordion (step 1) */
#cc-size-selector .cc-upsize-wrapper {
    margin-top: 8px;
    border-radius: 0;
    border: 1px solid #e5e7eb;
}

/* When cc-size-list sits inside cc-size-accordion, the accordion provides the outer border */
.cc-size-accordion .cc-size-list {
    border: none;
    border-radius: 0;
    overflow: visible;
}

/* в”Ђв”Ђ Box-shadow on all addon blocks (group 1 + dynamic categories) в”Ђв”Ђ */
.cc-dynamic-addon-block {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 4px 16px rgba(0, 0, 0, .04);
}

/* в”Ђв”Ђ Bases block (related products linked to the current size) в”Ђв”Ђ */
.cc-size-bases-block {
    margin: 12px 0 14px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    background: #fff;
}

.cc-size-bases-block__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.cc-size-bases-block__title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #1f2937;
}

.cc-size-bases-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.cc-size-base-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    background: #fafbfc;
    color: inherit;
    text-decoration: none;
    transition: border-color .18s, box-shadow .18s, transform .18s;
}

.cc-size-base-card:hover {
    border-color: #2563eb;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .08);
    transform: translateY(-1px);
}

.cc-size-base-card__img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 0;
    background: #f3f4f6;
}

.cc-size-base-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cc-size-base-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cc-size-base-card__title {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cc-size-base-card__price {
    font-size: 13px;
    font-weight: 700;
    color: #2563eb;
}

.cc-size-base-card__price del {
    color: #9ca3af;
    font-weight: 400;
    margin-right: 4px;
}


/* в”Ђв”Ђ Summary detail rows в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-summary-details {
    margin-bottom: 8px;
    font-size: 13px;
}

.cc-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
    line-height: 1.4;
}

.cc-summary-row--detail .cc-summary-label {
    color: var(--cc-text-secondary);
}

.cc-summary-row--detail .cc-summary-value {
    font-weight: 600;
    color: var(--cc-text-primary);
    white-space: nowrap;
}

.cc-summary-row--header {
    padding: 6px 0 2px;
    border-top: 1px solid var(--cc-border-light);
    margin-top: 4px;
}

.cc-summary-cat-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cc-text-secondary);
}

.cc-summary-row--indented {
    padding-left: 10px;
}

.cc-summary-row--si {
    flex-direction: column;
    gap: 2px;
    padding: 6px 0 2px;
    border-top: 1px solid var(--cc-border-light);
    margin-top: 4px;
}

.cc-summary-row--si .cc-summary-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cc-text-secondary);
}

.cc-summary-si-text {
    color: var(--cc-text-primary);
    font-size: 12px;
    font-style: italic;
    word-break: break-word;
}

/* в”Ђв”Ђ Grand total row в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-grand-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--cc-text-primary);
    border-top: 2px solid var(--cc-border);
    margin-bottom: 10px;
}

.cc-total-label {
    font-weight: 700;
}

/* в”Ђв”Ђ Prevent scroll-to-top when labels focus hidden inputs в”Ђв”Ђ
   All hidden radio/checkbox inputs get anchored to their card
   parent so the browser doesn't scroll to document origin    */
.cc-addon-card {
    position: relative;
}

.cc-addon-card>input[type="radio"],
.cc-addon-card>input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* SI label: anchor hidden toggle input so it doesn't scroll page */
.cc-si-label {
    position: relative;
}

#cc-si-global-toggle {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 1px !important;
    height: 1px !important;
}

/* в”Ђв”Ђ Full-width Add to Cart button в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cc-btn-full {
    width: 100% !important;
    display: block !important;
    text-align: center;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 0;
    background: var(--cc-blue-dark) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer;
    transition: background .15s, transform .1s;
    letter-spacing: .3px;
}

.cc-btn-full:hover {
    background: #1e40af !important;
    color: #fff !important;
}

.cc-btn-full:active {
    transform: scale(.98);
}

/* ============================================================
   ADDED TO CART MODAL — improved UI
   ============================================================ */
.cc-child-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    /* display managed by jQuery fadeIn/fadeOut — no flex here */
}

.cc-child-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(4px);
}

.cc-child-modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    background: #fff;
    border-radius: 0;
    padding: 32px 28px 28px;
    max-width: 340px;
    width: calc(100% - 32px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25), 0 4px 16px rgba(0, 0, 0, .12);
    animation: ccModalIn .25s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes ccModalIn {
    from {
        opacity: 0;
        transform: scale(.88) translateY(16px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.cc-child-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: #f3f4f6;
    border: none;
    border-radius: 0;
    width: 28px;
    height: 28px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
    padding: 0;
}

.cc-child-modal-close:hover {
    background: #e5e7eb;
    color: #111;
}

.cc-prompt-body {
    text-align: center;
}

.cc-success-icon {
    width: 56px;
    height: 56px;
    background: #dcfce7;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    animation: ccIconPop .35s .15s cubic-bezier(.34, 1.56, .64, 1) both;
}

.cc-success-icon .dashicons {
    color: #16a34a;
    font-size: 28px;
    width: 28px;
    height: 28px;
}

@keyframes ccIconPop {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.cc-prompt-title {
    font-size: 17px;
    font-weight: 700;
    color: #111;
    margin: 0 0 14px;
    letter-spacing: -.2px;
}

.cc-prompt-preview {
    margin: 0 auto 14px;
    width: 120px;
    height: 120px;
    border-radius: 0;
    overflow: hidden;
    border: 2px solid var(--cc-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}

.cc-prompt-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cc-prompt-price {
    font-size: 20px;
    font-weight: 800;
    color: var(--cc-blue-dark);
    margin-bottom: 20px;
    letter-spacing: -.3px;
}

.cc-prompt-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cc-prompt-btn {
    display: block;
    padding: 11px 16px;
    border-radius: 0;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .15s, transform .1s;
    letter-spacing: .2px;
}

.cc-prompt-btn:active {
    transform: scale(.98);
}

.cc-prompt-btn--primary {
    background: var(--cc-blue-dark);
    color: #fff !important;
}

.cc-prompt-btn--primary:hover {
    background: #1e40af;
    color: #fff !important;
}

.cc-prompt-btn--secondary {
    background: #f9fafb;
    color: var(--cc-blue-dark) !important;
    border: 1px solid var(--cc-border);
}

.cc-prompt-btn--secondary:hover {
    background: #f3f4f6;
    color: var(--cc-blue-dark) !important;
}

.cc-prompt-btn--continue {
    background: transparent;
    color: var(--cc-text-secondary) !important;
    border: none;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline !important;
    padding: 6px 16px;
}

.cc-prompt-btn--continue:hover {
    color: var(--cc-text-primary) !important;
}

/* Full-viewport cart confirmation modal override */
.cc-child-modal.is-open {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.cc-child-modal.is-open .cc-child-modal-content {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: min(540px, calc(100vw - 32px));
    max-width: 100%;
    max-height: calc(100vh - 32px);
    overflow: auto;
}

/* ============================================================
   CATALOG / SHOP LOOP — Customize button + "From" price
   ============================================================ */
.cc-loop-customize-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--cc-blue-dark, #1e3a5f) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700 !important;
    letter-spacing: .3px;
    transition: background .15s, transform .1s;
}

.cc-loop-customize-btn:hover {
    background: #1e40af !important;
    color: #fff !important;
}

.cc-loop-customize-btn:active {
    transform: scale(.97);
}

.cc-loop-customize-btn svg {
    flex-shrink: 0;
}

.cc-from-price {
    font-size: 0.85em;
    font-weight: 400;
    color: #6b7280;
    margin-right: 2px;
}

/* Step 4 accordion rows keep their own visible selection indicator */
.cc-size-accordion .cc-size-row--accordion {
    border: none;
    border-bottom: 1px solid #f0f0f1;
    border-left: 3px solid transparent;
    background: transparent;
    box-shadow: none;
}

.cc-size-accordion .cc-size-row--accordion:last-child {
    border-bottom: none;
}

.cc-size-accordion .cc-size-row--accordion:hover {
    border-color: transparent;
    background: #f9fafb;
    box-shadow: none;
}

.cc-size-accordion .cc-size-row--accordion.active {
    border-color: transparent;
    border-left-color: #2563eb;
    background: #eff6ff;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .12);
}

.cc-size-accordion .cc-size-row--accordion .cc-size-row__dot {
    width: 22px;
    height: 22px;
    border: 2px solid #cbd5e1;
    border-radius: 0;
    background: #fff;
    margin-top: 0;
}

.cc-size-accordion .cc-size-row--accordion .cc-size-row__dot-inner {
    display: block !important;
    width: 10px;
    height: 10px;
    border-radius: 0;
    background: #2563eb;
    opacity: 0;
    transform: scale(0.45);
    transition: opacity .15s, transform .15s;
}

.cc-size-accordion .cc-size-row--accordion.active .cc-size-row__dot {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

.cc-size-accordion .cc-size-row--accordion.active .cc-size-row__dot-inner {
    opacity: 1;
    transform: scale(1);
}

/* ============================================================
   Editor UI Refresh
   ============================================================ */
.cc-editor-modal-container {
    background: #0b1118 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.cc-editor-main::before,
.cc-editor-main::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 0;
}

.cc-editor-main::before {
    top: 0;
    height: 92px;
    background: linear-gradient(180deg, rgba(7, 14, 22, 0.34), rgba(7, 14, 22, 0));
}

.cc-editor-main::after {
    bottom: 0;
    height: 124px;
    background: linear-gradient(180deg, rgba(7, 14, 22, 0), rgba(7, 14, 22, 0.26));
}

.cc-editor-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 160;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 0;
    pointer-events: none;
}

.cc-editor-topbar > * {
    pointer-events: auto;
}

.cc-editor-topbar .cc-modal-close,
.cc-editor-close {
    position: static;
    width: 40px;
    height: 40px;
    background: rgba(10, 18, 28, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.92);
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(10px);
}

.cc-editor-topbar .cc-modal-close:hover,
.cc-editor-close:hover {
    background: rgba(17, 27, 40, 0.96);
    border-color: rgba(255, 255, 255, 0.24);
}

.cc-editor-close svg {
    display: block;
}

.cc-add-text-btn {
    position: static;
    top: auto;
    left: auto;
    z-index: 120;
    min-height: 40px;
    padding: 0 14px;
    gap: 8px;
    background: rgba(10, 18, 28, 0.84);
    color: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(10px);
}

.cc-add-text-btn:hover {
    background: rgba(17, 27, 40, 0.96);
    border-color: rgba(255, 255, 255, 0.24);
}

/* Suppress browser default dotted/dashed focus ring; use accessible focus-visible only */
.cc-add-text-btn:focus,
.cc-add-text-btn:focus-within {
    outline: none;
}

.cc-add-text-btn:focus-visible {
    outline: 2px solid rgba(96, 165, 250, 0.55);
    outline-offset: 2px;
}

.cc-add-text-btn::-moz-focus-inner {
    border: 0;
}

.cc-add-text-btn--disabled,
.cc-add-text-btn:disabled {
    opacity: 0.42;
}

.cc-canvas-container-wrap {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    max-width: 100%;
    overflow: hidden;
}

.cc-canvas-container-wrap .canvas-container {
    margin: 0 auto;
    flex: 0 0 auto;
}

.cc-font-panel__inner {
    flex: 1 1 auto;
    min-width: 0;
    gap: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
}

.cc-font-panel__inner::-webkit-scrollbar {
    display: none;
}

.cc-font-panel__divider {
    flex-shrink: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 10px 0;
    align-self: stretch;
}

/* Delete button — left side of font panel */
.cc-font-delete-btn {
    flex-shrink: 0;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    min-width: 92px;
    background: rgba(255, 255, 255, 0.02);
    border: none;
    color: #fda4af;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.cc-font-delete-btn:hover {
    background: rgba(239, 68, 68, 0.16);
    color: #fecaca;
}

.cc-font-delete-btn svg {
    flex-shrink: 0;
}

.cc-bottom-bar {
    background: #0b1118;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.18);
}

.cc-bottom-bar__inner {
    max-width: 980px;
    margin: 0 auto;
    width: 100%;
    align-items: center;
    padding: 12px 16px 14px;
    gap: 12px;
    flex-wrap: nowrap;
}

.cc-bottom-bar__group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cc-bottom-bar__sep {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, .15);
    margin: 0 4px;
}

/* Photo button — wider, has icon + label */
/* Separator inside pill */
.cc-bbar-sep {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, .1);
    margin: 0 3px;
    flex-shrink: 0;
}

.cc-bbar-right {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Toggle label */
/* Toggle switch track */
.cc-toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 36px;
    height: 20px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
    transition: background .2s;
}

/* Toggle switch thumb */
.cc-toggle-switch__thumb {
    position: absolute;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.84);
    transition: transform .2s, background .2s;
}

/* Mobile */
@media (max-width: 640px) {
    .cc-editor-modal-container.cc-modal-container .cc-modal-overlay,
    .cc-modal-overlay.cc-editor-modal-overlay {
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    .cc-editor-modal-container.cc-modal-container {
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        display: flex;
        flex-direction: column;
    }

    #cc-step-2,
    .cc-full-editor {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .cc-editor-topbar {
        padding: 10px 12px 0;
    }

    .cc-editor-main {
        flex: 1 1 auto;
        min-height: 0;
        aspect-ratio: auto;
        width: 100%;
        padding: 56px 12px 18px;
    }

    .cc-editor-main::before {
        height: 82px;
    }

    .cc-editor-main::after {
        height: 72px;
    }

    .cc-add-text-btn {
        min-height: 40px;
        padding: 0 14px;
        font-size: 12px;
    }

    .cc-editor-topbar .cc-modal-close,
    .cc-editor-close {
        width: 40px;
        height: 40px;
    }

    .cc-canvas-container-wrap {
        width: 100%;
        height: 500px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .cc-text-font-panel {
        left: 8px;
        right: 8px;
        bottom: 86px;
        width: calc(100% - 16px);
        max-width: calc(100% - 16px);
        transform: translateY(18px);
        border-radius: 0;
        max-height: 52px;
        z-index: 40;
    }

    .cc-text-font-panel.cc-font-panel--open {
        transform: translate(0%, 40px);
    }

    .cc-font-delete-btn {
        min-width: 38px;
        width: 38px;
        padding: 0;
        min-height: 40px;
    }

    .cc-font-delete-btn span {
        display: none;
    }

    .cc-font-panel__inner {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        padding: 6px;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .cc-font-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        min-height: 36px;
        max-width: 108px;
        padding: 0 10px;
        font-size: 10px;
        line-height: 1.1;
        white-space: nowrap;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Stack pill (left controls) above the right-side controls so neither row gets cramped */
    .cc-bottom-bar__inner {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 10px 12px max(env(safe-area-inset-bottom, 0px), 12px) !important;
    }

    .cc-bbar-pill {
        min-height: 48px;
        width: 100%;
        max-width: 100%;
        justify-self: stretch;
        justify-content: space-around;
    }

    .cc-bbar-btn {
        width: 40px;
        height: 40px;
    }

    .cc-bbar-btn--photo {
        min-width: 52px;
        padding: 0 12px;
    }

    .cc-bbar-btn__label {
        display: none;
    }

    .cc-bbar-right {
        width: 100%;
        margin-left: 0;
        align-items: stretch;
        justify-content: stretch;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
        justify-self: stretch;
    }

    .cc-bbar-toggle {
        min-width: 0;
        width: 100%;
        min-height: 48px;
        padding: 0 12px;
        gap: 10px;
    }

    /* Keep the price visible on the dedicated mobile row (there's plenty of room now) */
    .cc-bbar-price {
        display: inline-block;
        font-size: 11px;
    }

    .cc-bbar-save {
        min-width: 0;
        min-height: 48px;
        width: 100%;
        justify-content: center;
        padding: 0 14px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.04em;
    }

    .cc-bbar-save svg {
        flex-shrink: 0;
    }

    .cc-bottom-bar {
        position: relative;
        z-index: 30;
        padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px);
        height: auto;
    }

    .cc-loader-wrap {
        background: rgba(10, 17, 24, 0.72);
        backdrop-filter: blur(4px);
    }

    .cc-loader-circle {
        display: flex;
        width: 124px;
        height: 124px;
        padding: 7px;
    }

    .cc-loader-circle__percent {
        font-size: 32px;
    }

    .cc-loader-progress {
        display: none;
    }

    .cc-loader-status {
        margin-top: 16px;
        color: rgba(248, 251, 255, 0.92);
        font-size: 14px;
        font-weight: 600;
    }
}

/* ============================================================
   Editor Final Polish
   ============================================================ */
.cc-editor-modal-container .cc-add-text-btn {
    color: #f8fbff !important;
    background: rgba(13, 23, 35, 0.96) !important;
    border-color: rgba(191, 219, 254, 0.3) !important;
}

.cc-editor-modal-container .cc-add-text-btn svg {
    color: inherit;
    opacity: 0.96;
}

.cc-editor-modal-container .cc-add-text-btn:hover {
    color: #ffffff !important;
    background: rgba(19, 32, 47, 0.98) !important;
    border-color: rgba(191, 219, 254, 0.46) !important;
}

.cc-editor-modal-container .cc-bbar-pill {
    background: rgba(13, 23, 35, 0.86) !important;
    border-color: rgba(191, 219, 254, 0.12) !important;
}

.cc-editor-modal-container .cc-bbar-btn {
    color: #cdd9e8 !important;
}

.cc-editor-modal-container .cc-bbar-btn svg {
    color: inherit;
    opacity: 0.94;
}

.cc-editor-modal-container .cc-bbar-btn:hover,
.cc-editor-modal-container .cc-bbar-btn--photo {
    color: #f8fbff !important;
}

.cc-editor-modal-container .cc-bbar-btn--photo {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(191, 219, 254, 0.16);
}

.cc-editor-modal-container .cc-bbar-btn:hover {
    background: rgba(255, 255, 255, 0.11) !important;
    border-color: rgba(191, 219, 254, 0.16) !important;
}

.cc-editor-modal-container .cc-bbar-btn__label {
    color: #f8fbff !important;
}

.cc-editor-modal-container .cc-text-font-panel {
    background: rgba(10, 18, 28, 0.98) !important;
    border-color: rgba(191, 219, 254, 0.18) !important;
}

.cc-editor-modal-container .cc-font-delete-btn {
    color: #fca5a5 !important;
    background: rgba(255, 255, 255, 0.02);
}

.cc-editor-modal-container .cc-font-delete-btn svg {
    color: inherit;
    opacity: 0.95;
}

.cc-editor-modal-container .cc-font-delete-btn:hover {
    color: #ffe4e6 !important;
    background: rgba(239, 68, 68, 0.16) !important;
}

.cc-editor-modal-container .cc-font-btn {
    color: #dbe7f3 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(191, 219, 254, 0.14) !important;
}

.cc-editor-modal-container .cc-font-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(191, 219, 254, 0.24) !important;
}

.cc-editor-modal-container .cc-font-btn--active {
    color: #f8fbff !important;
    background: rgba(37, 99, 235, 0.3) !important;
    border-color: rgba(96, 165, 250, 0.9) !important;
    box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.28), 0 0 0 1px rgba(37, 99, 235, 0.12) !important;
}

@media (max-width: 768px) {
    .cc-editor-modal-container .cc-canvas-container-wrap,
    .cc-editor-modal-container .cc-canvas-container-wrap .canvas-container,
    .cc-editor-modal-container .cc-canvas-container-wrap canvas {
        touch-action: none;
    }
}

@media (max-width: 480px) {
    .cc-editor-modal-container .cc-bbar-sep {
        height: auto;
    }
}