/* Clouders Culori v1.3.0 - caseta „Culori disponibile” pe produs + „N culori” pe carduri */
/* caseta stă sub poza mare (desktop) / după coș (telefon), mutată de front.js */
.ccl { --ccl-acc: #d6334a; --ccl-acc-bg: #fff3f5; --ccl-line: #eceef0; --ccl-mute: #7a7f8a;
    margin: 16px 0; padding: 16px 18px 14px; border: 1px solid var(--ccl-line); border-radius: 18px; background: #fff;
    font-size: 14px; color: #1f2329; text-align: left; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.ccl:not(.is-ready) { display: none; }
.ccl-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.ccl-title { font-size: 15px; font-weight: 700; color: #1f2329; letter-spacing: -.01em; }
.ccl-n { display: inline-block; min-width: 22px; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #f2f3f5;
    color: #4a4f59; font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; vertical-align: 1px; }
.ccl-stock { color: #1d8a4e; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ccl-stock::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #22a35a; vertical-align: 1px; }
.ccl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-bottom: 12px; line-height: 1.35; font-size: 13px; }
.ccl-label { color: var(--ccl-mute); }
.ccl-name { font-weight: 600; color: #1f2329; }
.ccl-note { color: var(--ccl-acc); font-size: 12px; font-weight: 600; }
.ccl-note:empty { display: none; }
.ccl-count { margin-left: auto; color: #8a8f99; font-size: 12px; }
.ccl-oos { margin: -4px 0 12px; padding: 8px 12px; border-radius: 10px; background: var(--ccl-acc-bg); color: #b4233a; font-size: 13px; font-weight: 600; }
.ccl-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ccl-list li { margin: 0; padding: 0; list-style: none; min-width: 0; }
.ccl .ccl-more { display: none; }
.ccl.is-all .ccl-more { display: block; }

/* culori: „chip” cu poza mică + numele */
.ccl-sw { position: relative; display: flex; align-items: center; gap: 8px; height: 44px; max-width: 100%; padding: 3px 12px 3px 3px;
    border: 1.5px solid #e3e5ea; border-radius: 12px; background: #fff; color: #1f2329; text-decoration: none;
    transition: border-color .15s, box-shadow .15s, background-color .15s; }
a.ccl-sw:hover, a.ccl-sw:focus { text-decoration: none; color: #1f2329; }
.ccl-sw img { display: block; flex: none; width: 36px; height: 36px; object-fit: contain; border-radius: 9px; background: #f7f7f9; }
.ccl-cn { font-size: 13px; font-weight: 600; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
a.ccl-sw:hover { border-color: #c9ccd3; box-shadow: 0 4px 12px rgba(16, 24, 40, .08); }
a.ccl-sw:focus-visible { outline: 2px solid var(--ccl-acc); outline-offset: 2px; }
.ccl-sw.is-current { border-color: var(--ccl-acc); background: var(--ccl-acc-bg); box-shadow: 0 0 0 1px var(--ccl-acc) inset; cursor: default; }
.ccl-sw.is-current::after { content: ""; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--ccl-acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
    box-shadow: 0 0 0 2px #fff; }
.ccl-sw.is-oos { border-style: dashed; background: #fafafb; }
.ccl-sw.is-oos img { opacity: .4; filter: grayscale(1); }
.ccl-sw.is-oos .ccl-cn { color: #9a9ea8; text-decoration: line-through; text-decoration-color: #b9bcc4; font-weight: 500; }
.ccl-sw.is-current.is-oos { border-style: solid; }
.ccl-all { height: 44px; padding: 0 14px; border: 1.5px dashed #d5d7dd; border-radius: 12px; background: #fafafb; color: #4a4f59;
    font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.ccl-all:hover { border-color: var(--ccl-acc); color: var(--ccl-acc); }

/* arome / valori: butoane cu text */
.ccl.is-text .ccl-list { gap: 6px; }
.ccl.is-text .ccl-sw { height: auto; min-height: 36px; padding: 6px 13px; border-radius: 999px; }
.ccl.is-text .ccl-txt { font-size: 13px; font-weight: 600; color: #333; white-space: nowrap; line-height: 1.2; }
.ccl.is-text a.ccl-sw:hover { box-shadow: none; background: var(--ccl-acc-bg); border-color: #f0b8c2; }
.ccl.is-text .ccl-sw.is-current { background: var(--ccl-acc); border-color: var(--ccl-acc); box-shadow: none; }
.ccl.is-text .ccl-sw.is-current::after { display: none; }
.ccl.is-text .ccl-sw.is-current .ccl-txt { color: #fff; }
.ccl.is-text .ccl-sw.is-oos { background: #f6f6f8; }
.ccl.is-text .ccl-sw.is-oos .ccl-txt { color: #9a9ea8; text-decoration: line-through; }
.ccl.is-text .ccl-sw.is-current.is-oos .ccl-txt { color: #fff; }
.ccl.is-text .ccl-all { height: 36px; border-radius: 999px; }
.ccl-card.is-text { padding: 4px 10px; }
/* v1.2.0: al doilea rând (Nicotină / Cantitate) */
.ccl-row + .ccl-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid #f0f0f3; }
.ccl-row-one .ccl-head { margin-bottom: 0; }

/* legătura mică din caseta de preț (doar telefon / tabletă) */
.ccl-jump { display: none; }

@media (max-width: 991px) {
    /* tema pune totul într-o coloană cu „order”: coș = 3, #cpe-info = 4 -> caseta vine după coș, înaintea descrierii */
    #product .primary_block > .pb-left-column > #ccl { order: 4; grid-column: 1; margin: 0 0 14px; }
    .ccl-jump { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 2px; padding: 5px 12px 5px 6px; border: 1px solid #ececf0;
        border-radius: 999px; background: #fff; color: #1f2329; font-size: 13px; font-weight: 600; text-decoration: none; }
    .ccl-jump:hover, .ccl-jump:focus { color: #1f2329; text-decoration: none; }
    .ccl-jump i { font-style: normal; color: #d6334a; }
    .ccl-jump-th { display: inline-flex; }
    .ccl-jump-th img { width: 22px; height: 22px; object-fit: contain; border-radius: 50%; background: #f7f7f9; border: 2px solid #fff; box-shadow: 0 0 0 1px #e3e5ea; }
    .ccl-jump-th img + img { margin-left: -7px; }
}

@media (max-width: 767px) {
    .ccl { padding: 14px 0 12px; }
    .ccl-top, .ccl-head, .ccl-oos, .ccl-row-one { margin-left: 14px; margin-right: 14px; }
    .ccl-row + .ccl-row { margin-top: 12px; padding-top: 12px; }
    .ccl-list { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
        padding: 6px 14px 6px; scroll-padding: 0 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%); }
    .ccl-list::-webkit-scrollbar { display: none; }
    .ccl-list li { flex: none; scroll-snap-align: start; }
    .ccl .ccl-more { display: block; }
    .ccl-list li:has(.ccl-all) { display: none; }
    .ccl-cn { max-width: 120px; }
    .ccl.is-text .ccl-sw { min-height: 34px; padding: 5px 12px; }
    .ccl.is-text .ccl-row.is-many .ccl-list { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto);
        grid-auto-columns: max-content; gap: 6px; }
}

/* carduri (v1.3.1): rând de culori sub poză, în partea cu numele; spațiu rezervat la toate cardurile listei, ca rândurile să rămână egale */
.product-image-container { position: relative; }
ul.product_list.ccl-has > li .product-container .right-block, ul.product_list.grid.ccl-has > li .product-container .right-block { position: relative; padding-top: 36px !important; }
.ccl-card { position: absolute; left: 10px; right: 10px; top: 6px; z-index: 2; display: flex; align-items: center; gap: 0; height: 26px; min-width: 0; }
.ccl-dot { display: block; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #e5e7eb; overflow: hidden; background: #fff; flex: none; margin-left: -6px; transition: transform .15s, box-shadow .15s; }
.ccl-dot:first-child { margin-left: 0; }
.ccl-dot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ccl-dot.is-current { box-shadow: 0 0 0 2px #dc2626; z-index: 1; }
.ccl-dot.is-oos img { opacity: .4; filter: grayscale(1); }
.ccl-dot:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px #dc2626; z-index: 2; }
.ccl-more { flex: none; height: 24px; min-width: 24px; padding: 0 6px; margin-left: -6px; border-radius: 999px; border: 2px solid #fff; background: #f1f5f9; color: #334155; font-size: 10.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px #e5e7eb; }
.ccl-card-n { font-size: 11.5px; font-weight: 600; color: #64748b; white-space: nowrap; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; }
.ccl-card.is-text { padding: 0; }
.ccl-card.is-text .ccl-card-n { margin-left: 0; padding: 3px 10px; border-radius: 999px; background: #f1f5f9; color: #334155; font-weight: 700; }
@media (max-width: 480px) {
    .ccl-dot { width: 22px; height: 22px; }
    .ccl-dot:nth-child(n+4) { display: none; }
    .ccl-card { left: 8px; right: 8px; }
}


/* v1.3.2: eticheta și „+N” sunt linkuri spre produs */
a.ccl-card-n, a.ccl-more { text-decoration: none !important; cursor: pointer; }
a.ccl-card-n:hover { color: #dc2626 !important; }
.ccl-card.is-text a.ccl-card-n:hover { background: #fee2e2; color: #b91c1c !important; }
a.ccl-more:hover { background: #fee2e2; color: #b91c1c; }