.dc { background:#141c29; border-radius:14px; padding:52px 36px 48px; font-family:'Cormorant Garamond',Georgia,serif; color:#d4d4a8; }
.dc-header { text-align:center; margin-bottom:48px; }
.dc-ornament { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:20px; }
.dc-line { width:50px; height:1px; background:linear-gradient(to right,transparent,rgba(168,168,128,0.4)); }
.dc-line.r { background:linear-gradient(to left,transparent,rgba(168,168,128,0.4)); }
.dc-dot { width:4px; height:4px; background:#a8a880; transform:rotate(45deg); }
.dc-tag { font-size:11px; letter-spacing:5px; text-transform:uppercase; color:#6e7a60; font-weight:300; }
.dc-title { font-size:40px; font-weight:300; font-style:italic; color:#e8e8c8; line-height:1; margin-bottom:10px; }
.dc-sub { font-size:16px; color:#6e7a60; font-weight:300; letter-spacing:1px; }

.dc-palette { margin-bottom:44px; }
.dc-palette-title { font-size:10px; letter-spacing:5px; text-transform:uppercase; color:rgba(110,122,96,0.55); margin-bottom:18px; text-align:center; }
.dc-swatches { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.sw { display:flex; flex-direction:column; align-items:center; gap:9px; }
.sw-c { width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,0.08); transition:transform 0.2s; cursor:default; }
.sw:hover .sw-c { transform:scale(1.12); }
.sw-n { 
    font-size:11px; 
    letter-spacing:1px; 
    color:rgba(168,168,128,1); 
    text-align:center; 
    max-width:60px; 
    line-height:1.3; 
}

.dc-cols { 
    display:grid; 
    grid-template-columns:1fr 1fr; 
    gap:2px; 
    background:rgba(212,212,168,0.08); 
    border:1px solid rgba(212,212,168,0.12); 
    margin-bottom:2px; 
}

.dc-col { 
    background:#1c2535; 
    padding:28px 24px 32px;
}

.dc-col-head { font-size:10px; letter-spacing:5px; text-transform:uppercase; color:#6e7a60; font-weight:300; margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.dc-col-head::after { content:''; flex:1; height:1px; background:rgba(168,168,128,0.1); }

.car-wrap { position:relative; }
.car-viewport { overflow:hidden; width:100%; }
.car-track { display:flex; transition:transform 0.4s cubic-bezier(.4,0,.2,1); will-change:transform; }
.car-slide { flex:0 0 100%; width:100%; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; gap:14px; }

/* фото-рамка */
.photo-frame {
    width:100%; aspect-ratio:3/4;
    background:#243040;
    border:1px solid rgba(212,212,168,0.15);
    position:relative; overflow:hidden;
    transition: border-color 0.35s, box-shadow 0.35s;
}
.photo-frame img { width:100%; height:100%; object-fit:cover; object-position:center center; display:block; }

/* активная рамка */
.car-slide.active .photo-frame {
    border-color: rgba(212,212,168,0.7);
    box-shadow: 0 0 0 1px rgba(212,212,168,0.25), inset 0 0 0 3px rgba(212,212,168,0.08);
}

/* кремовый оверлей на неактивных */
.car-slide:not(.active) .photo-frame::after {
    content:'';
    position:absolute; inset:0;
    background: rgba(20,28,41,0.45);
    transition: opacity 0.35s;
}

/* подпись — активная ярче */
.outfit-name { font-size:20px; font-style:italic; font-weight:300; color:#6e7a60; text-align:center; line-height:1.2; transition:color 0.3s; }
.outfit-desc { font-size:14px; color:rgba(110,122,96,0.5); text-align:center; line-height:1.6; transition:color 0.3s; }
.car-slide.active .outfit-name { color:#c8c4a0; }
.car-slide.active .outfit-desc { color:#6e7a60; opacity:1; }

/* угловые декоры рамки — активные */
.ph-c { position:absolute; width:14px; height:14px; border-color:rgba(168,168,128,0.2); border-style:solid; transition:border-color 0.35s; }
.ph-c.tl { top:8px; left:8px; border-width:1px 0 0 1px; }
.ph-c.tr { top:8px; right:8px; border-width:1px 1px 0 0; }
.ph-c.bl { bottom:8px; left:8px; border-width:0 0 1px 1px; }
.ph-c.br { bottom:8px; right:8px; border-width:0 1px 1px 0; }
.car-slide.active .ph-c { border-color:rgba(212,212,168,0.55); }

.ph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.ph-icon { color:rgba(168,168,128,0.2); font-size:36px; }
.ph-lbl { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:rgba(168,168,128,0.2); font-weight:300; }

.car-controls { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:18px; }
.car-btn { background:rgba(28,37,53,0.9); border:1px solid rgba(168,168,128,0.2); color:#a8a880; width:30px; height:30px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; transition:border-color 0.2s; padding:0; flex-shrink:0; }
.car-btn:hover { border-color:rgba(168,168,128,0.55); }

.car-dots { display:flex; gap:8px; align-items:center; }
.c-dot { width:6px; height:6px; border-radius:50%; background:rgba(168,168,128,0.2); cursor:pointer; transition:background 0.25s; border:none; padding:0; display:block; }
.c-dot.active { background:#a8a880; }

.dc-note { 
    border-top:1px solid rgba(212,212,168,0.1); 
    padding-top:28px; 
    margin-top:28px; 
    text-align:center; 
    font-size:20px;
    font-style:italic;
    color:rgba(168,168,128,1);
    line-height:1.7; 
}

@media screen and (max-width: 767px) {
    .dc-cols { 
        grid-template-columns:1fr; 
    } 
}