/* ==========================================================================
   FILE: assets/css/complete-look.css
   PURPOSE: Styles the "Complete the Look" block on the single product page
   (template-parts/product/complete-look.php). Items sit in a row (3-up on
   mobile too, scrolls sideways if narrow); total box + black Add button
   below. White background / black text, no colour anywhere.
   JS: assets/js/complete-look.js | Loaded only on product pages (section 42).
   ========================================================================== */

.dc-cl { max-width: 760px; margin: 34px auto 10px; padding: 26px 16px 8px; border-top: 6px solid var(--dc-bg-alt, #f7f7f5); }
.dc-cl__head { text-align: center; margin-bottom: 18px; }
.dc-cl__eyebrow { display: block; font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--dc-text-muted, #555); }
.dc-cl__title { font-family: var(--dc-font-heading, serif); font-size: 22px; font-weight: 700; margin: 6px 0 0; color: #000; }

.dc-cl__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.dc-cl__item { position: relative; display: flex; flex-direction: column; gap: 4px; text-align: center; cursor: pointer; min-width: 0; }
.dc-cl__item--main { cursor: default; }
.dc-cl__thumb { display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: 10px; background: #f4f4f2 center / cover no-repeat; border: 1px solid var(--dc-border, #e5e5e0); }
.dc-cl__name { font-size: 11.5px; font-weight: 600; color: #000; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dc-cl__price { font-size: 12px; font-weight: 800; color: #000; }
.dc-cl__price del { color: #888; font-weight: 400; margin-right: 4px; }
.dc-cl__price ins { text-decoration: none; }
.dc-cl__tag { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #666; }

/* "+" joiner between items (desktop+mobile, cosmetic) */
.dc-cl__item:not(:last-child)::after {
	content: "+"; position: absolute; top: 34%; right: -12px; width: 20px; height: 20px; border-radius: 50%;
	background: #000; color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; z-index: 2; pointer-events: none;
}

.dc-cl__chk { position: absolute; top: 7px; left: 7px; z-index: 3; width: 18px; height: 18px; margin: 0; accent-color: #000; cursor: pointer; }
.dc-cl__item.is-off .dc-cl__thumb { opacity: .35; }
.dc-cl__item.is-off .dc-cl__name,
.dc-cl__item.is-off .dc-cl__price { opacity: .45; }

.dc-cl__size { width: 100%; font-size: 11.5px; padding: 6px 4px; border: 1px solid #000; border-radius: 6px; background: #fff; color: #000; margin-top: 2px; }

.dc-cl__total { display: flex; align-items: center; justify-content: space-between; border: 1px solid #000; border-radius: 8px; padding: 11px 13px; margin-bottom: 10px; }
.dc-cl__total span b { display: block; font-size: 13px; color: #000; }
.dc-cl__total span em { font-style: normal; font-size: 11px; color: #666; }
.dc-cl__total > b { font-size: 16px; font-weight: 800; color: #000; }

.dc-cl__btn {
	display: block; width: 100%; padding: 14px 0; background: #000; color: #fff; border: 0; border-radius: 7px;
	font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.dc-cl__btn:disabled { opacity: .6; cursor: default; }
.dc-cl__msg { min-height: 18px; margin: 8px 0 0; text-align: center; font-size: 12.5px; color: #000; }
.dc-cl__msg a { color: #000; font-weight: 700; text-decoration: underline; }

@media (max-width: 560px) {
	.dc-cl { padding: 22px 14px 4px; }
	.dc-cl__items { gap: 10px; }
}