/* Customer jewellery gallery and support directory. */
body.emerald-theme .showcase-shell { padding-block: 8px 30px; }
body.emerald-theme .showcase-shell .main-title-row { margin-block: 8px 0; }
body.emerald-theme .page-title-icon--showcase {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m3 9 4-5h10l4 5-9 12Z M3 9h18 M7 4l5 17 5-17' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m3 9 4-5h10l4 5-9 12Z M3 9h18 M7 4l5 17 5-17' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.emerald-theme .showcase-intro { margin: 6px auto 22px; text-align: center; color: #f0e4c6; font-size: 13px; line-height: 1.9; }
.showcase-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.emerald-theme .showcase-shell .showcase-filters {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	max-width: 640px; padding: 0; margin: 0 auto 24px; border: 0; border-radius: 0; background: none; box-shadow: none;
}
body.emerald-theme .showcase-filters label { position: relative; display: flex; align-items: center; gap: 0; min-width: 0; }
body.emerald-theme .showcase-search { flex: 1 1 250px; }
body.emerald-theme .showcase-search svg { position: absolute; inset-inline-start: 14px; width: 18px; height: 18px; color: #cdb77e; stroke: currentColor; stroke-width: 1.6; pointer-events: none; }
body.emerald-theme .showcase-filters input, body.emerald-theme .showcase-filters select {
	width: 100%; height: 44px; min-height: 44px; padding: 8px 14px; border: 1px solid #a48a506b; border-radius: 12px;
	background: #051e18b3; color: #f6edd6; font: inherit; font-size: 12px; box-shadow: inset 0 1px 0 #ffffff08;
}
body.emerald-theme .showcase-filters input { padding-inline-start: 42px; }
body.emerald-theme .showcase-filters input::placeholder { color: #b9c2b7; opacity: 1; }
body.emerald-theme .showcase-category-filter { flex: 0 1 180px; }
body.emerald-theme .showcase-category-filter select { appearance: none; padding-inline-end: 34px; cursor: pointer; }
body.emerald-theme .showcase-category-filter > span:last-child { position: absolute; inset-inline-end: 14px; color: #dfc17e; pointer-events: none; }
body.emerald-theme .showcase-filters :is(input, select):focus-visible { outline: 2px solid #ddbe71; outline-offset: 2px; }
body.emerald-theme .showcase-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 20px; align-items: stretch; }
body.emerald-theme .showcase-card {
	display: flex; flex-direction: column; min-width: 0; border-radius: 18px; border: 1px solid #a88b4a66;
	background: #101310; color: #faf5e8; box-shadow: 0 10px 24px #00140d33;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
body.emerald-theme .showcase-card-link {
	display: flex; flex: 1; flex-direction: column; width: 100%; height: auto; padding: 0; border: 0; border-radius: 0;
	font: inherit; text-align: start; color: inherit; background: none; cursor: pointer;
}
body.emerald-theme .showcase-card-link:focus-visible { outline-offset: -4px; }
body.emerald-theme .showcase-card-media { position: relative; width: 100%; min-width: 0; aspect-ratio: 1; overflow: hidden; background: #101310; }
body.emerald-theme .showcase-card-media::after {
	content: ""; position: absolute; inset: 45% 0 -1px; pointer-events: none;
	background: linear-gradient(to bottom, transparent, #10131033 35%, #101310cc 78%, #101310);
}
body.emerald-theme .showcase-image { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; background: #101310; transition: transform .4s ease; }
body.emerald-theme .showcase-category {
	width: fit-content; max-width: 100%; padding: 4px 10px; border: 1px solid #d1b06766; border-radius: 99px;
	background: #111711c9; color: #efcf87; font-size: 10px; line-height: 1.6; overflow-wrap: anywhere;
}
body.emerald-theme .showcase-card-media .showcase-category { position: absolute; z-index: 1; top: 12px; inset-inline-start: 12px; max-width: calc(100% - 24px); backdrop-filter: blur(10px); }
body.emerald-theme .showcase-card-copy { position: relative; display: flex; flex: 1; flex-direction: column; gap: 7px; width: 100%; margin-top: -14px; padding: 0 16px 14px; color: #faf5e8; }
body.emerald-theme .showcase-card-copy h2 { margin: 0; color: #faf5e8; font-size: 15px; font-weight: 700; line-height: 1.8; overflow-wrap: anywhere; }
body.emerald-theme .showcase-weight { margin: 0; color: #c0c2b8; font-size: 11px; line-height: 1.8; }
body.emerald-theme .showcase-card-footer { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; }
body.emerald-theme .showcase-price { display: grid; gap: 3px; min-width: 0; margin: 0; color: #eacd8b; font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
body.emerald-theme .showcase-price > span { color: #b5b9ad; font-size: 10px; font-weight: 400; }
body.emerald-theme .showcase-price strong { color: #efcf87; font-weight: 750; }
body.emerald-theme .showcase-price small { font-size: 10px; font-weight: 400; }
body.emerald-theme .showcase-more { display: inline-flex; align-items: center; gap: 6px; color: #d1b77c; font-size: 11px; line-height: 1.8; }
body.emerald-theme .showcase-more > span { font-size: 17px; }
body.emerald-theme .showcase-contact-button {
	display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px;
	margin: 0 14px 14px; padding: 9px 12px; border: 1px solid #9c81494d; border-radius: 10px;
	color: #edce8a; background: #d5b46512; font: inherit; font-size: 12px; cursor: pointer;
}
body.emerald-theme .showcase-contact-button svg, body.emerald-theme .showcase-contact-symbol svg { width: 17px; height: 17px; flex: 0 0 auto; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
body.emerald-theme .showcase-load-more { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 26px; color: #dfd4b3; font-size: 11px; }
body.emerald-theme .showcase-load-more button {
	display: flex; align-items: center; justify-content: center; gap: 18px; min-width: 170px; min-height: 44px; padding: 10px 20px;
	border: 1px solid #c5a65799; border-radius: 12px; background: #081e17; color: #f0d38e; font: inherit; font-size: 13px; cursor: pointer;
}
body.emerald-theme .showcase-load-more button:disabled { opacity: .6; cursor: wait; }
body.emerald-theme .showcase-state { justify-content: center; margin-block: 16px; min-height: 80px; color: #ede4cd; background: #091d16aa; border: 1px solid #c5a65766; font-size: 13px; }
body.emerald-theme .showcase-error { flex-direction: column; text-align: center; }
body.emerald-theme .showcase-modal { z-index: 260; padding: 20px; background: #000a; backdrop-filter: blur(8px); }
body.emerald-theme .showcase-modal .trade-modal-card {
	display: block; width: min(100%, 800px); max-height: calc(100dvh - 40px); padding: 0; gap: 0; border-radius: 20px;
	border: 1px solid #a98c4b99; color: #f9f1df; background: #101310; background-image: none;
}
body.emerald-theme .showcase-modal .trade-modal-close { position: absolute; z-index: 2; top: 12px; right: 12px; width: 36px; height: 36px; border: 1px solid #ffffff40; border-radius: 50%; background: #101310d9; color: #f4d997; font-size: 24px; backdrop-filter: blur(8px); }
body.emerald-theme .showcase-dialog-content { width: 100%; min-width: 0; }
body.emerald-theme .showcase-modal .showcase-detail-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; }
body.emerald-theme .showcase-detail-media { position: relative; min-width: 0; overflow: hidden; }
body.emerald-theme .showcase-detail-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, transparent 65%, #101310); pointer-events: none; }
body.emerald-theme .showcase-detail-image { width: 100%; height: 100%; min-height: 380px; max-height: 560px; display: block; object-fit: cover; background: #101310; }
body.emerald-theme .showcase-detail-copy { min-width: 0; padding: 40px 26px 24px; color: #f9f1df; }
body.emerald-theme .showcase-modal .showcase-detail-copy h2, body.emerald-theme .showcase-modal h2 { margin: 12px 0; color: #f1d48d; font-size: 22px; line-height: 1.7; overflow-wrap: anywhere; }
body.emerald-theme .showcase-modal .showcase-description { margin: 12px 0; color: #dadbcf; font-size: 13px; line-height: 1.95; }
body.emerald-theme .showcase-specs { margin: 20px 0; border-top: 1px solid #ccb16e33; font-size: 12px; }
body.emerald-theme .showcase-specs > div { align-items: baseline; flex-wrap: wrap; gap: 6px 12px; padding-block: 11px; border-color: #ccb16e33; }
body.emerald-theme .showcase-specs dt { color: #b7baaf; }
body.emerald-theme .showcase-specs dd { color: #f4e3bd; }
body.emerald-theme .showcase-detail-copy .showcase-contact-button { width: 100%; margin: 0; }
body.emerald-theme .showcase-contact-copy, body.emerald-theme .showcase-dialog-state { padding: 64px 30px 32px; text-align: center; }
body.emerald-theme .showcase-modal .showcase-contact-copy p, body.emerald-theme .showcase-modal .showcase-dialog-state p { color: #dadbcf; font-size: 14px; line-height: 2; }
body.emerald-theme .showcase-contact-symbol { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 18px; border: 1px solid #c8aa63; border-radius: 50%; color: #edce8a; background: #d5b46512; }
body.emerald-theme .showcase-contact-symbol svg { width: 26px; height: 26px; }
body.emerald-theme .showcase-contact-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 18px; padding: 10px 22px; border-radius: 10px; color: #19241b; background: linear-gradient(135deg, #f1d996, #c9a34e); text-decoration: none; font-size: 13px; font-weight: 700; }
body.emerald-theme .showcase-card:only-child { grid-column: 1 / -1; width: min(100%, 340px); justify-self: center; }

/* Support rows are shared by the contact page and header contact dialog. */
body.emerald-theme .support-directory-list { gap: 10px; }
body.emerald-theme .support-directory-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 16px 18px; border-radius: 13px; box-shadow: 0 4px 14px rgb(0 20 13 / 8%); }
body.emerald-theme .support-directory-person { flex: 1 1 160px; min-width: 0; gap: 3px; overflow-wrap: anywhere; }
body.emerald-theme .support-directory-person strong { font-size: 14px; font-weight: 800; color: #124c3a; }
body.emerald-theme .support-directory-person span { font-size: 12px; font-weight: 400; color: #5e6b64; }
body.emerald-theme .support-directory-actions { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 16px; min-width: 0; max-width: 100%; }
body.emerald-theme .support-directory-phone { flex: 0 0 auto; white-space: nowrap; font-size: 14px; font-variant-numeric: tabular-nums; color: #07543b; line-height: 1.8; text-decoration: none; }
body.emerald-theme .support-directory-phone:hover { text-decoration: underline; }
body.emerald-theme .support-directory-channels { min-width: 0; max-width: 100%; }
body.emerald-theme .support-directory-channels .contact-channel-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
body.emerald-theme .support-directory-channels .contact-channel-item { padding: 7px 9px; gap: 7px; max-width: 100%; background: #f6f2e7; border-color: #e6dcbd; }
body.emerald-theme .support-directory-channels .contact-channel-icon { flex-basis: 19px; width: 19px; height: 19px; color: #8c712d; }
body.emerald-theme .support-directory-channels .contact-channel-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; color: #18362d; }
body.emerald-theme .support-directory-channels .contact-channel-copy strong { font-size: 10px; font-weight: 500; color: #647267; }
body.emerald-theme .support-directory-channels .contact-channel-copy a, body.emerald-theme .support-directory-channels .contact-channel-copy > span { font-size: 12px; }
body.emerald-theme .trade-modal-card .support-directory > h3 { color: #18362d; }
@media (hover: hover) {
	body.emerald-theme .showcase-card:hover { transform: translateY(-3px); border-color: #c8a750; box-shadow: 0 14px 30px #00140d55; }
	body.emerald-theme .showcase-card:hover .showcase-image { transform: scale(1.04); }
	body.emerald-theme .showcase-contact-button:hover { background: #d5b46526; border-color: #c5a65799; }
	body.emerald-theme .showcase-load-more button:not(:disabled):hover { background: #122e22; }
}
@media (max-width: 680px) {
	body.emerald-theme .showcase-intro { font-size: 12px; margin-bottom: 18px; }
	body.emerald-theme .showcase-shell .showcase-filters { gap: 8px; margin-bottom: 18px; }
	body.emerald-theme .showcase-search { flex: 1 1 160px; }
	body.emerald-theme .showcase-category-filter { flex: 0 1 125px; }
	body.emerald-theme .showcase-filters input, body.emerald-theme .showcase-filters select { font-size: 11px; border-radius: 10px; }
	body.emerald-theme .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	body.emerald-theme .showcase-card { border-radius: 14px; }
	body.emerald-theme .showcase-card-copy { padding: 0 12px 12px; gap: 5px; }
	body.emerald-theme .showcase-card-copy h2 { font-size: 13px; }
	body.emerald-theme .showcase-card-media .showcase-category { top: 8px; inset-inline-start: 8px; padding: 3px 8px; font-size: 9px; }
	body.emerald-theme .showcase-price { font-size: 13px; }
	body.emerald-theme .showcase-card-footer { gap: 6px; padding-top: 8px; }
	body.emerald-theme .showcase-contact-button { font-size: 11px; gap: 6px; margin: 0 10px 10px; padding-inline: 7px; }
	body.emerald-theme .showcase-modal { padding: 14px; }
	body.emerald-theme .showcase-modal .trade-modal-card { max-height: calc(100dvh - 28px); border-radius: 16px; }
	body.emerald-theme .showcase-modal .showcase-detail-card { grid-template-columns: minmax(0, 1fr); }
	body.emerald-theme .showcase-detail-media::after { background: linear-gradient(to bottom, transparent 50%, #101310); }
	body.emerald-theme .showcase-detail-image { height: auto; min-height: 0; max-height: 330px; aspect-ratio: 1.15; }
	body.emerald-theme .showcase-detail-copy { padding: 0 20px 20px; margin-top: -16px; position: relative; }
	body.emerald-theme .showcase-modal .showcase-detail-copy h2 { font-size: 19px; }
	body.emerald-theme .showcase-contact-copy, body.emerald-theme .showcase-dialog-state { padding: 60px 20px 26px; }
	body.emerald-theme .support-directory-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 13px; }
	body.emerald-theme .support-directory-person { grid-column: 1; grid-row: 1; }
	body.emerald-theme .support-directory-actions { display: contents; }
	body.emerald-theme .support-directory-phone { grid-column: 2; grid-row: 1; font-size: 13px; }
	body.emerald-theme .support-directory-channels { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
	body.emerald-theme .showcase-grid { grid-template-columns: 1fr; }
	body.emerald-theme .showcase-search { flex-basis: 100%; }
	body.emerald-theme .showcase-category-filter { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	body.emerald-theme .showcase-card, body.emerald-theme .showcase-image { transition: none; }
}