/* ============================================================
   Diamond Layouts — page-level styles only.
   Card grid/list CSS comes from theme.css (same as jewellery shop).
   ============================================================ */

/* ── Section wrapper ─────────────────────────────────────── */
.vdl-section { padding: 32px 0 56px; }

/* ── btn-wine for active pagination ─────────────────────── */
.btn-wine {
	background: var(--wine, #8b3a52);
	color: var(--cream, #faf7f2);
	border: 1px solid var(--wine, #8b3a52);
}
.btn-wine:hover { background: var(--wine-deep, #6b2a3e); color: var(--cream, #faf7f2); }

/* ── Detail — two-col layout ─────────────────────────────── */
.vdl-dp { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 768px) { .vdl-dp { grid-template-columns: 1fr; } }

/* ── Detail — spec panels ────────────────────────────────── */
.vdl-dp__panel {
	background: #fff; border: 1px solid var(--line, #e8e0d4);
	border-radius: 10px; padding: 22px 24px;
}
.vdl-dp__panel-title {
	font-size: 11px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--mocha, #bbb); margin: 0 0 14px;
}
.vdl-spec-dl { margin: 0; }
.vdl-spec-row {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line, #f0ebe3);
}
.vdl-spec-row:last-child { border-bottom: none; }
.vdl-spec-row dt { font-size: 12px; color: var(--mocha, #aaa); min-width: 110px; }
.vdl-spec-row dd { margin: 0; font-size: 13px; font-weight: 500; color: var(--espresso, #1a1a1a); text-align: right; }
.vdl-spec-row--hl dd { font-size: 18px; font-weight: 700; }

/* ── Detail — image/video gallery ───────────────────────── */
.vdl-gallery-grid {
	display: grid; grid-template-columns: repeat( 2, 1fr ); gap: 8px;
}
.vdl-gallery-item {
	display: block; border-radius: 8px; overflow: hidden;
	background: var(--beige, #f5f0ea); aspect-ratio: 1;
}
.vdl-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.vdl-gallery-item:hover img { transform: scale(1.03); }
.vdl-gallery-item--video { aspect-ratio: 16/9; }
.vdl-gallery-item--video video { width: 100%; height: 100%; object-fit: cover; display: block; }

.vdl-gallery-placeholder {
	border: 2px dashed var(--line, #e0d6c8); border-radius: 12px;
	display: flex; flex-direction: column; align-items: center;
	justify-content: center; gap: 8px; padding: 48px 20px;
	color: var(--mocha, #ccc);
}
.vdl-gallery-placeholder i { font-size: 2.5rem; }

/* ── Staff upload widget ─────────────────────────────────── */
.vdl-staff-upload {
	background: var(--cream, #faf7f2); border: 1px solid var(--line, #e8e0d4);
	border-radius: 10px; padding: 18px 20px; margin-top: 16px;
}
.vdl-staff-upload__title {
	font-size: 12px; font-weight: 700; letter-spacing: .07em;
	text-transform: uppercase; color: var(--mocha, #aaa); margin: 0 0 14px;
}

.vd-gupload-tabs { display: flex; border-bottom: 1px solid var(--line, #e8e0d4); margin-bottom: 14px; gap: 4px; }
.vd-gupload-tab {
	background: none; border: none; padding: 8px 14px;
	font-size: 12px; font-weight: 600; color: var(--mocha, #aaa); cursor: pointer;
	border-bottom: 2px solid transparent; margin-bottom: -1px;
	transition: color .15s, border-color .15s;
	display: flex; align-items: center; gap: 6px;
}
.vd-gupload-tab:hover { color: var(--espresso, #1a1a1a); }
.vd-gupload-tab.is-active { color: var(--wine, #8b3a52); border-bottom-color: var(--wine, #8b3a52); }
.vd-gupload-badge {
	background: var(--sand, #e8e0d4); color: var(--mocha, #888);
	font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 100px;
}
.vd-gupload-panel { display: none; }
.vd-gupload-panel.is-active { display: block; }

.vd-gupload-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.vd-gupload-thumb {
	position: relative; width: 72px; height: 72px;
	border-radius: 6px; overflow: hidden; border: 1px solid var(--line, #e0d6c8);
	background: var(--beige, #f5f0ea);
}
.vd-gupload-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-gupload-thumb--video {
	width: auto; min-width: 100px; height: 44px; padding: 0 10px;
	display: flex; align-items: center;
}
.vd-gupload-vidname {
	font-size: 11px; color: var(--espresso, #555);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px;
}
.vd-gupload-del {
	position: absolute; top: 2px; right: 2px; width: 20px; height: 20px;
	background: rgba(0,0,0,.55); border: none; border-radius: 50%;
	color: #fff; font-size: 10px; cursor: pointer;
	display: flex; align-items: center; justify-content: center; line-height: 1;
}
.vd-gupload-thumb--video .vd-gupload-del { position: static; margin-left: 8px; flex-shrink: 0; }

.vd-gupload-drop {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 6px; padding: 20px 16px;
	border: 2px dashed var(--line, #d4c9b8); border-radius: 8px;
	cursor: pointer; text-align: center; transition: border-color .15s, background .15s;
}
.vd-gupload-drop:hover, .vd-gupload-drop.is-drag {
	border-color: var(--wine, #8b3a52); background: var(--beige, #f9f4ec);
}
.vd-gupload-drop-icon { font-size: 1.6rem; color: var(--taupe, #c4ad8e); }
.vd-gupload-drop span { font-size: 12px; color: var(--mocha, #888); }
.vd-gupload-drop small { font-size: 11px; color: var(--taupe, #bbb); }

.vd-gupload-msg { font-size: 12px; margin: 8px 0 0; min-height: 18px; }
.vd-gupload-msg.is-ok    { color: #2e7d32; }
.vd-gupload-msg.is-error { color: #c62828; }
.vd-gupload-msg.is-busy  { color: var(--mocha, #888); }

/* ── Linked diamonds table ───────────────────────────────── */
.vdl-stones-table { font-size: 13px; }
.vdl-stones-table th {
	font-size: 11px; letter-spacing: .06em;
	text-transform: uppercase; color: var(--mocha, #aaa); font-weight: 600;
}

/* ── Layouts toolbar — Lab / Type filters stacked vertically ── */
.vdl-filters-vert { min-width: 240px; }

/* ── Wishlist heart button on layout cards/rows (color comes from theme's .vd-wish-btn) ── */
.vdl-wish {
	position: absolute; z-index: 10;
	width: 30px; height: 30px; border-radius: 50%;
	background: rgba(251,250,248,.92); border: 1px solid var(--line, #e8e0d4);
	display: flex; align-items: center; justify-content: center;
}
.vdl-card .vdl-wish { top: 10px; right: 10px; }
.vdl-row .vdl-wish { top: 64%;
    left: 8px;
    transform: translateY(-50%);
    z-index: 10; }

.vdl-row .vdl-check-lbl{top: 35%;
    left: 12px;
    transform: translateY(-50%);}