@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ═══════════════════════════════════════════
   CPC CONFIGURATOR v6 — Premium Redesign
   ═══════════════════════════════════════════ */

:root {
    --navy: #1a1a2e;
    --navy2: #2d2d5e;
    --orange: #f37021;
    --orangeD: #d9601a;
    --orangeL: rgba(243, 112, 33, .06);
    --orangeL2: rgba(243, 112, 33, .12);
    --bg: #f5f6fa;
    --w: #ffffff;
    --w2: #fafbfd;
    --bd: #e4e7ef;
    --bd2: #eef0f5;
    --t: #1a1a2e;
    --t2: #4a4a6a;
    --t3: #8888a0;
    --t4: #b8b8cc;
    --green: #059669;
    --red: #dc2626;
    --r: 12px;
    --r-sm: 8px;
    --pill: 100px;
    --sh: 0 1px 3px rgba(0, 0, 0, .04);
    --sh2: 0 4px 20px rgba(0, 0, 0, .06);
    --sh3: 0 8px 32px rgba(0, 0, 0, .08);
    --f: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --transition: all .2s ease;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

/* ═══ SVG FIX — ensure all inline SVGs are visible ═══ */
.cpc-app svg {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.cpc-info-btn svg,
.cpc-obj-tool svg,
.cpc-header__back svg,
.cpc-header__reset svg,
.cpc-border-btn svg,
.cpc-add-text-btn svg,
.cpc-cart-btn svg,
.cpc-logo-drop svg {
    display: inline-block;
    width: auto;
    height: auto;
}

/* ═══ APP ═══ */
.cpc-app {
    font-family: var(--f);
    color: var(--t);
    background: var(--bg);
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

/* ═══ HEADER ═══ */
.cpc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px;
    height: 52px;
    background: var(--w);
    border-bottom: 1px solid var(--bd2);
    flex-shrink: 0;
    z-index: 50
}

.cpc-header__back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    color: var(--t3);
    text-decoration: none;
    transition: var(--transition)
}

.cpc-header__back:hover {
    background: var(--bg);
    color: var(--t)
}

.cpc-header__brand {
    flex: 1
}

.cpc-header__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--t);
    letter-spacing: -.2px
}

.cpc-header__reset {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border: 1.5px solid var(--bd);
    border-radius: var(--pill);
    background: var(--w);
    font-size: 12px;
    font-weight: 600;
    color: var(--t3);
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--f)
}

.cpc-header__reset:hover {
    border-color: var(--red);
    color: var(--red)
}

/* ═══ BODY ═══ */
.cpc-body {
    display: grid;
    grid-template-columns: 420px 1fr 380px;
    grid-template-rows: 1fr;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden
}

/* Tablet (1100–1280px): summary kolon biraz daraltılır */
@media (max-width:1280px) and (min-width:961px) {
    .cpc-body {
        grid-template-columns: 380px 1fr 340px
    }
}

/* ═══ LEFT PANEL ═══ */
.cpc-panel {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 24px 26px 110px;
    background: var(--w);
    border-right: 1px solid var(--bd2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--bd) transparent;
    min-height: 0
}

.cpc-panel::-webkit-scrollbar {
    width: 4px
}

.cpc-panel::-webkit-scrollbar-thumb {
    background: var(--bd);
    border-radius: 9px
}

/* ═══ SECTIONS — v6-rev5: slightly larger spacing & headings ═══ */
.cpc-sec {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--bd2)
}

.cpc-sec:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0
}

.cpc-sec__title {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--t);
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 6px
}

.cpc-sec__hint {
    font-size: 12px;
    color: var(--t3);
    margin: 0 0 12px;
    line-height: 1.4
}

/* ═══ MODEL CARDS ═══ */
.cpc-sec__title--model svg {
    color: var(--t3)
}

.cpc-collection {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
    margin-bottom: 6px
}

.cpc-model-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 8px 12px;
    border: 1.5px solid var(--bd);
    border-radius: 14px;
    background: var(--w);
    font-family: var(--f);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    min-width: 0
}

.cpc-model-card:hover {
    border-color: var(--orange);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .04)
}

.cpc-model-card.sel {
    border-color: var(--orange);
    background: var(--orangeL);
    box-shadow: 0 2px 8px rgba(243, 112, 33, .15)
}

.cpc-model-card__icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--icon-color) 12%, transparent);
    color: var(--icon-color);
    border-radius: 8px;
    font-size: 18px;
    line-height: 1
}

.cpc-model-card__label {
    font-size: 12px;
    font-weight: 800;
    color: var(--t);
    text-align: center;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%
}

.cpc-model-card__price {
    font-size: 11px;
    font-weight: 700;
    color: var(--t3)
}

.cpc-model-card.sel .cpc-model-card__price {
    color: var(--orange)
}

/* Legacy .cpc-collection__btn fallback (kept for safety) */
.cpc-collection__btn {
    flex: 1;
    padding: 10px 16px;
    border: 2px solid var(--bd);
    border-radius: var(--pill);
    background: var(--w);
    font-size: 14px;
    font-weight: 700;
    color: var(--t2);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--f)
}

.cpc-collection__btn:hover {
    border-color: var(--orange);
    color: var(--orange)
}

.cpc-collection__btn.sel {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
    box-shadow: 0 2px 8px rgba(243, 112, 33, .25)
}

/* ═══ SHAPES ═══ */
.cpc-shapes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 12px
}

.cpc-shape-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 6px 12px;
    border: 2px solid var(--bd);
    border-radius: var(--r);
    background: var(--w);
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--f);
    min-width: 0;
    min-height: 88px
}

.cpc-shape-card:hover {
    border-color: var(--navy)
}

.cpc-shape-card.sel {
    border-color: var(--orange);
    background: var(--orangeL)
}

.cpc-shape-card.sel .cpc-shape-card__icon {
    color: var(--orange)
}

.cpc-shape-card.sel .cpc-shape-card__label {
    color: var(--orange)
}

.cpc-shape-card__icon {
    width: 48px;
    height: 48px;
    color: var(--t3);
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center
}

.cpc-shape-card__icon svg {
    width: 100%;
    height: 100%
}

.cpc-shape-card__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--t3);
    transition: var(--transition);
    text-align: center;
    white-space: nowrap
}

/* ═══ Speciaal design — 5th card (image5 inspired, theme-styled) ═══ */
.cpc-shape-card--special {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    min-height: 0;
    border: 2px solid var(--orange);
    border-radius: 14px;
    background: linear-gradient(135deg, #fff 0%, var(--orangeL) 100%);
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden
}

.cpc-shape-card--special::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--orange), var(--orangeD));
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 0
}

.cpc-shape-card--special > * {
    position: relative;
    z-index: 1
}

.cpc-shape-card--special:hover {
    border-color: var(--orange);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(243, 112, 33, .25)
}

.cpc-shape-card--special:hover::before {
    opacity: 1
}

.cpc-special-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff;
    color: var(--orange);
    box-shadow: inset 0 0 0 1.5px var(--orange);
    transition: var(--transition)
}

.cpc-shape-card--special:hover .cpc-special-badge {
    background: rgba(255, 255, 255, .15);
    color: #fff;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5)
}

.cpc-special-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px
}

.cpc-special-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: .3px;
    line-height: 1.2;
    transition: color .25s ease
}

.cpc-special-sub {
    font-size: 11px;
    font-weight: 500;
    color: var(--t3);
    line-height: 1.3;
    transition: color .25s ease
}

.cpc-shape-card--special:hover .cpc-special-title,
.cpc-shape-card--special:hover .cpc-special-sub {
    color: #fff
}

.cpc-special-arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orange);
    transition: transform .25s ease, color .25s ease
}

.cpc-shape-card--special:hover .cpc-special-arrow {
    color: #fff;
    transform: translateX(4px)
}

/* ═══ COLORS ═══ */
.cpc-search {
    width: 100%;
    padding: 9px 14px 9px 36px;
    border: 1.5px solid var(--bd);
    border-radius: var(--pill);
    font-size: 13px;
    font-weight: 500;
    color: var(--t);
    background: transparent;
    font-family: var(--f);
    transition: var(--transition);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23b8b8cc' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.156a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    margin-bottom: 10px
}

.cpc-search:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px var(--orangeL)
}

.cpc-search::placeholder {
    color: var(--t4)
}

.cpc-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 180px;
    overflow-y: auto;
    padding: 4px;
    scrollbar-width: thin
}

.cpc-swatch {
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    cursor: pointer;
    border: 2.5px solid transparent;
    transition: var(--transition);
    background-size: cover;
    background-position: center;
    box-shadow: var(--sh);
    flex-shrink: 0
}

.cpc-swatch:hover {
    transform: scale(1.1);
    box-shadow: var(--sh2)
}

.cpc-swatch.sel {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px var(--orangeL2);
    transform: scale(1.1)
}

.cpc-color-selected {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--w2);
    border-radius: var(--r-sm);
    margin-top: 8px
}

.cpc-color-selected__swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--bd);
    flex-shrink: 0;
    background-size: cover;
    background-position: center
}

.cpc-color-selected__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--t)
}

/* ═══ DIMENSIONS — segmented control (image9 reference) ═══ */
.cpc-dims-tabs {
    display: flex;
    gap: 0;
    margin: 12px 0 14px;
    border: 1.5px solid var(--bd);
    border-radius: var(--pill);
    overflow: hidden;
    background: transparent
}

.cpc-dims-tab {
    flex: 1;
    padding: 11px 14px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    color: var(--t2);
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--f);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .3px
}

.cpc-dims-tab.sel {
    background: var(--orange);
    color: #fff
}

.cpc-dims-tab:hover:not(.sel) {
    color: var(--orange)
}

/* ═══ STANDARD SIZE CHIPS — düzenli 3 sütunlu grid (v6-rev8) ═══ */
.cpc-size-chips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px
}

.cpc-size-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 6px;
    border: 1.5px solid var(--bd);
    border-radius: var(--pill);
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    color: var(--t2);
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--f);
    white-space: nowrap;
    text-align: center;
    letter-spacing: .2px
}

.cpc-size-chip:hover:not(.sel) {
    border-color: var(--orange);
    color: var(--orange)
}

.cpc-size-chip.sel {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
    box-shadow: 0 2px 8px rgba(243, 112, 33, .25)
}

.cpc-dims-row {
    display: flex;
    gap: 12px
}

.cpc-dims-field {
    flex: 1
}

.cpc-dims-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--t3);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .5px
}

.cpc-dims-input-wrap {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--bd);
    border-radius: var(--pill);
    overflow: hidden;
    transition: var(--transition)
}

.cpc-dims-input {
    padding-left: 18px !important
}

.cpc-dims-input-wrap:focus-within {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px var(--orangeL)
}

.cpc-dims-input {
    flex: 1;
    padding: 10px 12px;
    border: none;
    font-size: 15px;
    font-weight: 600;
    color: var(--t);
    background: transparent;
    font-family: var(--f);
    min-width: 0
}

.cpc-dims-input:focus {
    outline: none
}

.cpc-dims-input::placeholder {
    color: var(--t4);
    font-weight: 400
}

.cpc-dims-unit {
    padding: 0 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--t4);
    background: transparent;
    height: 100%;
    display: flex;
    align-items: center;
    border-left: 1px solid var(--bd2)
}

.cpc-err {
    padding: 8px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--r-sm);
    color: var(--red);
    font-size: 12px;
    font-weight: 500;
    margin-top: 8px
}

/* ═══ BORDER ═══ */
/* Info butonu — sadece daire SVG icon, ayrı kare/yuvarlak kutu yok (v6-rev9) */
.cpc-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: var(--t3);
    cursor: help;
    transition: var(--transition);
    padding: 0;
    margin-left: 4px
}

.cpc-info-btn:hover {
    color: var(--orange);
    background: transparent
}

.cpc-border-info-popup {
    padding: 10px 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--r-sm);
    margin: 8px 0 10px;
    font-size: 12px;
    color: #92400e;
    line-height: 1.5
}

/* ═══ BORDER — segmented control (image10 reference) ═══ */
.cpc-border-opts {
    display: flex;
    gap: 0;
    margin-top: 12px;
    border: 1.5px solid var(--bd);
    border-radius: var(--pill);
    overflow: hidden;
    background: transparent
}

.cpc-border-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    color: var(--t2);
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--f);
    text-transform: uppercase;
    letter-spacing: .3px
}

.cpc-border-btn:hover:not(.sel) {
    color: var(--orange)
}

.cpc-border-btn.sel {
    background: var(--orange);
    color: #fff
}

.cpc-border-btn.sel[data-border="without"] {
    background: var(--t3)
}

/* ═══ DELIVERY ═══ */
.cpc-del-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border: 2px solid var(--bd);
    border-radius: var(--r);
    cursor: pointer;
    transition: var(--transition);
    margin-bottom: 8px
}

.cpc-del-card:last-child {
    margin-bottom: 0
}

.cpc-del-card:hover {
    border-color: var(--navy)
}

.cpc-del-card.sel {
    border-color: var(--orange);
    background: var(--orangeL)
}

.cpc-del-card__label {
    font-weight: 700;
    font-size: 14px;
    color: var(--t)
}

.cpc-del-card__days {
    font-size: 11px;
    color: var(--t3);
    margin-top: 2px
}

.cpc-del-card__price {
    font-size: 16px;
    font-weight: 800;
    color: var(--navy)
}

.cpc-del-card.sel .cpc-del-card__price {
    color: var(--orange)
}

/* ═══ LOGO ═══ */
.cpc-logo-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 20px;
    border: 2px dashed var(--bd);
    border-radius: var(--r);
    background: var(--w2);
    cursor: pointer;
    transition: var(--transition);
    color: var(--t3);
    margin-top: 8px
}

.cpc-logo-drop:hover {
    border-color: var(--orange);
    color: var(--orange);
    background: var(--orangeL)
}

.cpc-logo-drop.dragover {
    border-color: var(--orange);
    background: var(--orangeL);
    color: var(--orange)
}

.cpc-logo-drop span {
    font-size: 12px;
    font-weight: 600
}

.cpc-logo-gallery {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px
}

.cpc-logo-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: var(--r-sm);
    border: 2px solid var(--bd);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition)
}

.cpc-logo-thumb:hover {
    border-color: var(--orange)
}

.cpc-logo-thumb.sel {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px var(--orangeL2)
}

.cpc-logo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #f9f9f9
}

.cpc-logo-thumb__remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(220, 38, 38, .9);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s
}

.cpc-logo-thumb:hover .cpc-logo-thumb__remove {
    opacity: 1
}

/* ═══ TEXT ═══ */
.cpc-app .cpc-add-text-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: 1.5px solid var(--bd) !important;
    border-radius: var(--pill) !important;
    background: transparent !important;
    font-size: 13px;
    font-weight: 600;
    color: var(--t2);
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--f);
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important
}

.cpc-app .cpc-add-text-btn:hover {
    border-color: var(--orange) !important;
    color: var(--orange) !important;
    background: var(--orangeL) !important
}

.cpc-text-opts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--w2);
    border-radius: var(--r);
    margin-top: 10px;
    border: 1px solid var(--bd2)
}

.cpc-text-input {
    width: 100%;
    padding: 10px 16px;
    border: 1.5px solid var(--bd);
    border-radius: var(--pill);
    font-size: 14px;
    font-weight: 500;
    color: var(--t);
    background: transparent;
    font-family: var(--f);
    transition: var(--transition)
}

.cpc-text-input:focus {
    outline: none;
    border-color: var(--orange)
}

.cpc-text-controls {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap
}

.cpc-text-select {
    padding: 6px 12px;
    border: 1.5px solid var(--bd);
    border-radius: var(--pill);
    font-size: 12px;
    font-family: var(--f);
    color: var(--t);
    background: transparent
}

.cpc-text-range {
    width: 70px;
    accent-color: var(--orange)
}

.cpc-text-color {
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--bd);
    border-radius: 50%;
    padding: 2px;
    cursor: pointer;
    background: transparent
}

.cpc-text-toggle {
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--bd);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f);
    transition: var(--transition);
    color: var(--t2)
}

.cpc-text-toggle.active {
    background: var(--orange);
    color: #fff;
    border-color: var(--orange)
}

/* ═══ QUANTITY ═══ */
.cpc-qty-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px
}

.cpc-qty-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--t2)
}

/* ═══ AANTAL — 3 ayrı pill element (v6-rev9) ═══
   − ve + butonları: outline daire, hover/click'te orange dolu (Standaard maten tab gibi)
   Ortada değer: pill outline, geniş, ortalı
*/
.cpc-qty-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: none;
    background: transparent;
    overflow: visible
}

.cpc-qty-btn {
    width: 40px;
    height: 40px;
    border: 1.5px solid var(--bd);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    color: var(--t2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f);
    transition: var(--transition);
    line-height: 1;
    padding: 0
}

.cpc-qty-btn:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff
}

.cpc-qty-btn:active {
    transform: scale(.95)
}

.cpc-qty-val {
    min-width: 58px;
    height: 40px;
    text-align: center;
    font-size: 16px;
    font-weight: 800;
    border: 1.5px solid var(--bd);
    border-radius: var(--pill);
    background: transparent;
    color: var(--t);
    font-family: var(--f);
    padding: 0 18px
}

.cpc-qty-val:focus {
    outline: none;
    border-color: var(--orange)
}

.cpc-qty-discount {
    font-size: 11px;
    font-weight: 700;
    color: var(--green);
    background: #ecfdf5;
    padding: 3px 10px;
    border-radius: var(--pill)
}

/* ═══ PREVIEW AREA (middle column) ═══ */
.cpc-preview-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px;
    overflow: hidden; /* v6-rev7: scroll kaldırıldı — alt boş alan yok */
    background: linear-gradient(135deg, #f1f3f7 0%, #e9ecf2 100%);
    min-width: 0;
    min-height: 0;
    position: relative;
    isolation: isolate
}

/* Diagonal watermark spans the ENTIRE preview-area (image8 reference, v6-rev6). */
.cpc-preview-area::before {
    content: '';
    position: absolute;
    inset: -20%;
    background-image: var(--cpc-wm, none);
    background-repeat: repeat;
    background-size: 240px auto;
    background-position: 0 0;
    transform: rotate(-30deg);
    transform-origin: center;
    opacity: .12;
    pointer-events: none;
    z-index: 0
}

.cpc-preview-area > * {
    position: relative;
    z-index: 1
}

.cpc-preview-box {
    width: 100%;
    max-width: 760px;
    max-height: 100%;
    background: transparent;
    border-radius: 16px;
    padding: 0;
    box-shadow: none;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0
}

.cpc-preview-title {
    display: none /* Tek arka plan + watermark olduğu için ayrı başlık gerekmez */
}

/* ═══ SUMMARY COLUMN (right) ═══ */
.cpc-summary-col {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px 20px 100px;
    background: var(--w);
    border-left: 1px solid var(--bd2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--bd) transparent;
    min-height: 0
}

.cpc-summary-col::-webkit-scrollbar {
    width: 4px
}

.cpc-summary-col::-webkit-scrollbar-thumb {
    background: var(--bd);
    border-radius: 2px
}

.cpc-canvas-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 760px;
    max-height: 100%;
    min-height: 0
}

.cpc-canvas-wrap canvas {
    display: block;
    touch-action: none;
    position: relative;
    z-index: 1;
    background: transparent !important
}

.cpc-canvas-wrap .canvas-container {
    max-width: 100% !important;
    max-height: 100% !important;
    position: relative;
    z-index: 1;
    background: transparent !important
}

.cpc-canvas-wrap .canvas-container canvas,
.cpc-canvas-wrap .lower-canvas,
.cpc-canvas-wrap .upper-canvas {
    max-width: 100% !important;
    max-height: 100% !important;
    background: transparent !important
}

/* Object toolbar */
.cpc-obj-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: var(--w);
    border: 1px solid var(--bd);
    border-radius: var(--pill);
    box-shadow: var(--sh2);
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10
}

.cpc-obj-tool {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--t2);
    cursor: pointer;
    transition: var(--transition)
}

.cpc-obj-tool:hover {
    background: var(--bg);
    border-color: var(--bd)
}

.cpc-obj-tool--danger:hover {
    background: #fef2f2;
    color: var(--red);
    border-color: #fecaca
}

.cpc-obj-tool-sep {
    width: 1px;
    height: 20px;
    background: var(--bd);
    margin: 0 4px
}

/* "Verwijder achtergrond" — labelled pill button (only visible when an image is selected) */
.cpc-obj-rmbg-btn {
    width: auto !important;
    padding: 0 14px;
    gap: 6px;
    background: var(--orangeL) !important;
    color: var(--orange) !important;
    border: 1.5px solid var(--orange) !important;
    border-radius: var(--pill) !important;
    font-family: var(--f);
    font-size: 12px;
    font-weight: 700
}

.cpc-obj-rmbg-btn:hover {
    background: var(--orange) !important;
    color: #fff !important
}

.cpc-obj-rmbg-text {
    white-space: nowrap;
    letter-spacing: .2px
}

/* Dimension overlay — sits inside canvas-wrap, labels positioned by JS using fillObj coords */
.cpc-dim-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5
}

.cpc-dim-label {
    position: absolute;
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
    background: rgba(255, 255, 255, .92);
    padding: 3px 9px;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    white-space: nowrap;
    line-height: 1.2
}

/* Initial positions before JS updates them — kept as a safe fallback. */
.cpc-dim-label--w {
    bottom: 4%;
    left: 50%;
    transform: translateX(-50%)
}

.cpc-dim-label--h {
    left: 4%;
    top: 50%;
    transform: translate(-100%, -50%)
}

.cpc-obj-dims {
    text-align: center;
    padding: 6px 14px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: var(--pill);
    font-size: 11px;
    font-weight: 600;
    color: #92400e;
    margin-top: 10px
}

/* ═══ SUMMARY — right column, bigger fonts ═══ */
.cpc-summary {
    background: var(--w);
    border-radius: 16px;
    padding: 24px 22px;
    box-shadow: var(--sh);
    position: sticky;
    top: 0
}

.cpc-summary__title {
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--t);
    margin-bottom: 16px
}

.cpc-summary__table {
    width: 100%;
    border-collapse: collapse
}

.cpc-summary__table td {
    padding: 8px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--bd2)
}

.cpc-summary__table td:first-child {
    color: var(--t3);
    font-weight: 500
}

.cpc-summary__table td:last-child {
    text-align: right;
    font-weight: 700;
    color: var(--t)
}

.cpc-summary__divider {
    height: 1px;
    background: var(--bd);
    margin: 14px 0
}

.cpc-summary__pricing {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.cpc-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px
}

.cpc-summary__row span:first-child {
    color: var(--t3);
    font-weight: 500
}

.cpc-summary__row span:last-child {
    font-weight: 700;
    color: var(--t)
}

.cpc-summary__row--sub {
    padding-top: 10px
}

.cpc-summary__row--sub span:last-child {
    font-size: 17px;
    font-weight: 800
}

.cpc-summary__row--total {
    padding-top: 6px;
    align-items: baseline
}

.cpc-summary__row--total span:first-child {
    font-weight: 800;
    color: var(--t);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .3px
}

.cpc-summary__row--total span:last-child {
    font-size: 28px;
    font-weight: 900;
    color: var(--orange);
    line-height: 1
}

.cpc-summary__discount {
    color: var(--green) !important
}

/* ═══ CART BUTTON ═══ */
.cpc-cart-btn {
    width: 100%;
    padding: 14px 24px;
    border: none;
    border-radius: var(--pill);
    background: linear-gradient(135deg, var(--orange), var(--orangeD));
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--f);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    box-shadow: 0 2px 12px rgba(243, 112, 33, .25)
}

.cpc-cart-btn:hover {
    box-shadow: 0 4px 20px rgba(243, 112, 33, .35);
    transform: translateY(-1px)
}

.cpc-cart-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
    transform: none;
    box-shadow: none
}

.cpc-cart-ok {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    padding: 12px;
    margin-top: 12px;
    background: #ecfdf5;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--green)
}

.cpc-cart-ok a {
    color: var(--orange);
    font-weight: 700;
    text-decoration: none
}

.cpc-cart-ok a:hover {
    text-decoration: underline
}

/* ═══ RESET MODAL ═══ */
.cpc-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    backdrop-filter: blur(4px)
}

.cpc-modal__box {
    background: var(--w);
    border-radius: 16px;
    padding: 28px;
    max-width: 380px;
    width: 90%;
    box-shadow: var(--sh3);
    text-align: center
}

.cpc-modal__box h4 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--t)
}

.cpc-modal__box p {
    font-size: 13px;
    color: var(--t3);
    line-height: 1.5;
    margin-bottom: 20px
}

.cpc-modal__actions {
    display: flex;
    gap: 10px;
    justify-content: center
}

.cpc-modal__btn {
    padding: 10px 24px;
    border-radius: var(--pill);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--f);
    border: none
}

.cpc-modal__btn--cancel {
    background: var(--bg);
    color: var(--t2)
}

.cpc-modal__btn--cancel:hover {
    background: var(--bd2)
}

.cpc-modal__btn--confirm {
    background: var(--red);
    color: #fff
}

.cpc-modal__btn--confirm:hover {
    background: #b91c1c
}

/* ═══ EDIT BUTTON IN CART ═══ */
.cpc-edit-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border: 1.5px solid var(--orange);
    border-radius: var(--pill);
    background: var(--orangeL);
    color: var(--orange);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
    font-family: var(--f);
    margin-top: 6px;
}

.cpc-edit-link:hover {
    background: var(--orange);
    color: #fff;
}

/* ═══ MOBILE ═══ */
@media(max-width:960px) {
    .cpc-app {
        height: auto;
        max-height: none;
        min-height: 100vh;
        overflow: auto;
    }

    .cpc-body {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        grid-template-rows: none;
        height: auto;
        overflow: visible;
    }

    /* Stack order on mobile: panel → preview → summary */
    .cpc-panel {
        order: 1;
        overflow-y: visible;
        overflow-x: hidden;
        padding: 16px 16px 24px;
        border-right: none;
        min-height: 0;
    }

    .cpc-preview-area {
        order: 2;
        position: relative;
        top: auto;
        z-index: auto;
        padding: 16px;
        max-height: none;
        overflow: visible;
        flex-direction: column;
        gap: 16px;
        border-top: 1px solid var(--bd);
        justify-content: flex-start;
    }

    .cpc-preview-box {
        padding: 0;
        border-radius: var(--r);
        min-height: auto;
        max-width: 100%;
    }

    .cpc-summary-col {
        order: 3;
        overflow-y: visible;
        padding: 16px;
        border-left: none;
        border-top: 1px solid var(--bd);
    }

    .cpc-shapes {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .cpc-shape-card {
        padding: 14px 6px 12px;
        min-height: 84px;
    }

    .cpc-shape-card__icon {
        width: 40px;
        height: 40px;
    }

    .cpc-collection {
        grid-template-columns: repeat(3, 1fr);
    }

    .cpc-collection__btn {
        padding: 8px 12px;
        font-size: 12px;
    }

    .cpc-model-card {
        padding: 12px 6px 10px;
    }

    .cpc-model-card__icon {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .cpc-model-card__label {
        font-size: 11px;
    }

    /* Summary not sticky on mobile (full flow) */
    .cpc-summary {
        position: static;
        padding: 18px 16px;
    }

    .cpc-summary__row--total span:last-child {
        font-size: 24px;
    }

    /* Canvas scaling on mobile — preserve square aspect ratio */
    .cpc-canvas-wrap {
        max-width: 100%
    }

    .cpc-canvas-wrap .canvas-container {
        max-width: 100% !important;
        max-height: 80vw !important;
        margin: 0 auto;
    }

    .cpc-canvas-wrap .canvas-container canvas {
        max-width: 100% !important;
        max-height: 80vw !important;
    }

    /* Dimension labels stay near carpet on mobile */
    .cpc-dim-label {
        font-size: 11px;
        padding: 2px 7px;
    }
}

@media (max-width: 480px) {
    .cpc-header__title {
        font-size: 13px;
    }

    .cpc-collection__btn {
        padding: 7px 10px;
        font-size: 11px;
    }

    .cpc-shape-card {
        padding: 12px 4px 10px;
        min-height: 76px;
    }

    .cpc-shape-card__icon {
        width: 32px;
        height: 32px;
    }

    .cpc-shape-card__label {
        font-size: 10px;
    }

    .cpc-special-title {
        font-size: 12px;
    }

    .cpc-special-sub {
        font-size: 10px;
    }

    .cpc-special-badge {
        width: 38px;
        height: 38px;
    }

    .cpc-model-card__icon {
        width: 28px;
        height: 28px;
        font-size: 14px;
        border-radius: 6px;
    }

    .cpc-model-card__label {
        font-size: 10px;
    }

    .cpc-model-card__price {
        font-size: 10px;
    }

    .cpc-dims-row {
        flex-direction: column;
        gap: 8px;
    }

    .cpc-size-chips {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ═══════════════════════════════════════════════════════════════
   v6-rev10: THEME OVERRIDE GUARD
   WoodMart ve diğer temalar global `button { border-radius: ... }`
   gibi kurallarla bizim buton-radius'larımızı eziyor. Kritik
   buton/input kurallarını !important ile sabitliyoruz.
   ═══════════════════════════════════════════════════════════════ */

.cpc-app .cpc-size-chip {
    border-radius: var(--pill) !important;
    background: transparent !important;
    border: 1.5px solid var(--bd) !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: .2px !important
}
.cpc-app .cpc-size-chip:hover:not(.sel) {
    border-color: var(--orange) !important;
    color: var(--orange) !important;
    background: transparent !important
}
.cpc-app .cpc-size-chip.sel {
    background: var(--orange) !important;
    border-color: var(--orange) !important;
    color: #fff !important
}

/* Aantal +/- daire butonlar */
.cpc-app .cpc-qty-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important
}
.cpc-app .cpc-qty-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border: 1.5px solid var(--bd) !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--t2) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    padding: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    text-transform: none !important
}
.cpc-app .cpc-qty-btn:hover {
    background: var(--orange) !important;
    border-color: var(--orange) !important;
    color: #fff !important
}
.cpc-app .cpc-qty-val {
    min-width: 58px !important;
    height: 40px !important;
    border: 1.5px solid var(--bd) !important;
    border-radius: var(--pill) !important;
    background: transparent !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-align: center !important;
    padding: 0 18px !important;
    box-shadow: none !important
}

/* Info butonu — sadece icon, çevresinde hiçbir kutu/border yok */
.cpc-app .cpc-info-btn {
    width: 18px !important;
    height: 18px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-left: 4px !important;
    color: var(--t3) !important
}
.cpc-app .cpc-info-btn:hover {
    color: var(--orange) !important;
    background: transparent !important;
    border: none !important
}

/* Sepete ekle pill */
.cpc-app .cpc-cart-btn {
    border-radius: var(--pill) !important
}

/* Renk arama input */
.cpc-app .cpc-search {
    border-radius: var(--pill) !important;
    background: transparent !important
}

/* Breedte / Hoogte input wrap */
.cpc-app .cpc-dims-input-wrap {
    border-radius: var(--pill) !important
}

/* Tekst toevoegen ve diğer pill butonlar */
.cpc-app .cpc-add-text-btn {
    border-radius: var(--pill) !important;
    background: transparent !important;
    box-shadow: none !important
}

/* Tekst input + select + B/I daire toggle */
.cpc-app .cpc-text-input,
.cpc-app .cpc-text-select {
    border-radius: var(--pill) !important;
    background: transparent !important
}
.cpc-app .cpc-text-toggle,
.cpc-app .cpc-text-color {
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important
}
.cpc-app .cpc-text-toggle.active {
    background: var(--orange) !important;
    color: #fff !important
}

/* Reset modal */
.cpc-modal .cpc-modal__btn {
    border-radius: var(--pill) !important
}

/* Standaard / Eigen maat segmented içindeki butonlar */
.cpc-app .cpc-dims-tabs {
    border-radius: var(--pill) !important
}
.cpc-app .cpc-dims-tab {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important
}
.cpc-app .cpc-dims-tab.sel {
    background: var(--orange) !important;
    color: #fff !important
}

/* Met / Zonder rand segmented */
.cpc-app .cpc-border-opts {
    border-radius: var(--pill) !important
}
.cpc-app .cpc-border-btn {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important
}
.cpc-app .cpc-border-btn.sel {
    background: var(--orange) !important;
    color: #fff !important
}
.cpc-app .cpc-border-btn.sel[data-border="without"] {
    background: var(--t3) !important
}

/* Reset header butonu pill */
.cpc-app .cpc-header__reset {
    border-radius: var(--pill) !important
}

/* ═══════════════════════════════════════════════════════════════
   v6-rev20 — WoodMart Header Embedded Mode
   ─────────────────────────────────────────
   Configurator sayfasında (Elementor Canvas ile) WoodMart Header
   Builder çıktısını render ediyoruz. CSS burada:
     • WoodMart wrapper .cpc-embedded-header, .cpc-app'in üstünde
     • .cpc-app .cpc-app--with-wm-header modunda 100vh - header
     • WoodMart wrapper'ının page-content padding'i devre dışı
   Bu kurallar SADECE 'cpc-app--with-wm-header' class'lı sayfalarda
   aktif. Elementor Canvas + Manual header enjection senaryosu için.
   ═══════════════════════════════════════════════════════════════ */

/* WoodMart wrapper — sadece header'ı içerir, min-height olmasın */
.cpc-embedded-header {
    background: transparent !important;
    min-height: 0 !important;
    height: auto !important
}

.cpc-embedded-header > header {
    position: relative !important;
    z-index: 100
}

/* Configurator with-header mode: viewport - header height */
.cpc-app--with-wm-header {
    height: calc(100vh - var(--cpc-wm-header-h, 96px)) !important;
    max-height: calc(100vh - var(--cpc-wm-header-h, 96px)) !important
}

/* Mobile: WoodMart mobile header genelde ~60px */
@media (max-width: 960px) {
    .cpc-app--with-wm-header {
        height: auto !important;
        max-height: none !important;
        min-height: calc(100vh - var(--cpc-wm-header-h, 60px)) !important
    }
}

/* WoodMart page-title banner (turuncu Personnalises kutusu) DEVRE DIŞI —
   çünkü Elementor Canvas'ta zaten page title yok, ama WoodMart bazen
   inline eklerse gizleyelim (safe guard) */
body .cpc-embedded-header ~ .wd-page-title,
body .cpc-embedded-header + .wd-page-title,
.cpc-embedded-header .wd-page-title {
    display: none !important
}

/* ═══════════════════════════════════════════════════════════════
   v6-rev19 — ADAPTIVE LAYOUT
   Configurator, bulunduğu container'a göre kendini adapt eder.
   Elementor Canvas'ta (fullwidth viewport) 3-sütun geniş,
   WoodMart Elementor Tam Genişlik'te container dar olabilir → grid küçülür,
   Mobile'da tek sütun stack. min-width:0 → grid overflow'a karşı standart fix.
   ═══════════════════════════════════════════════════════════════ */

.cpc-app,
.cpc-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important
}

.cpc-panel,
.cpc-preview-area,
.cpc-summary-col {
    min-width: 0 !important
}

/* Wide desktop (>1440px): geniş 3-sütun */
@media (min-width: 1441px) {
    .cpc-body {
        grid-template-columns: 420px 1fr 380px !important
    }
}

/* Standart desktop (1200-1440px): normal 3-sütun */
@media (max-width: 1440px) and (min-width: 1200px) {
    .cpc-body {
        grid-template-columns: 380px minmax(360px, 1fr) 340px !important
    }
}

/* Small desktop / large tablet (1024-1199px): sıkıştırılmış 3-sütun */
@media (max-width: 1199px) and (min-width: 1024px) {
    .cpc-body {
        grid-template-columns: 320px minmax(300px, 1fr) 300px !important
    }
    .cpc-preview-box,
    .cpc-canvas-wrap {
        max-width: 460px !important
    }
}

/* Tablet (768-1023px): 2-sütun (panel + preview üstte, summary altta full-width) */
@media (max-width: 1023px) and (min-width: 768px) {
    .cpc-body {
        grid-template-columns: 320px 1fr !important;
        grid-template-rows: auto auto !important
    }
    .cpc-panel {
        grid-column: 1;
        grid-row: 1
    }
    .cpc-preview-area {
        grid-column: 2;
        grid-row: 1
    }
    .cpc-summary-col {
        grid-column: 1 / -1;
        grid-row: 2;
        border-left: none;
        border-top: 1px solid var(--bd)
    }
}

/* Mobile (<768px): tek sütun stack (mevcut mobile query zaten var; burada
   sadece grid'i devre dışı bırakıp flex stack'e döndürelim) */
@media (max-width: 767px) {
    .cpc-body {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important
    }
    .cpc-panel { order: 1 !important }
    .cpc-preview-area { order: 2 !important }
    .cpc-summary-col { order: 3 !important }
}

/* ═══════════════════════════════════════════════════════════════
   v6-rev22 — MOBIL YATAY SCROLL FIX (audit-safe)
   ──────────────────────────────────────────────
   Mobil cihazlarda sola/sağa kaydırma yaparken configurator dışına
   boş beyaz alan çıkma sorunu. Sebep: bir alt-element viewport
   genişliğinden geniş olduğunda body yatay scroll aktif oluyor.
   ÖNEMLİ: .cpc-embedded-header'a overflow-x KOYMUYORUZ çünkü
   WoodMart mobile hamburger menü, search dropdown ve mini-cart
   absolute positioning ile açılıyor — kırpılırsa görünmez olur.
   html/body üzerindeki overflow-x:hidden tek başına yeterli.
   Bu blok sadece mobil'de aktif; masaüstü/tablet davranışı DEĞİŞMEZ.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important
    }
    /* Configurator iç elementleri viewport genişliğinde tutulur
       ama overflow:visible kalır (dropdown/tooltip'ler çalışsın) */
    .cpc-app,
    .cpc-body,
    .cpc-panel,
    .cpc-preview-area,
    .cpc-summary-col,
    .cpc-preview-box,
    .cpc-canvas-wrap {
        max-width: 100vw !important
    }
    /* Grid child'ların min-width:auto sebebiyle taşmasını engelle */
    .cpc-panel,
    .cpc-preview-area,
    .cpc-summary-col {
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important
    }
    /* Embedded WoodMart header'ın genişliği viewport'a fit olur,
       ancak overflow VISIBLE kalır → dropdown/menu/cart panelleri
       düzgün açılabilsin. */
    .cpc-embedded-header {
        max-width: 100vw !important
    }
}