/* Setting page (ring builder part 2). Colors follow theme.json's palette. */

.cmjc-setting { margin-top: .5rem; }
.cmjc-setting.is-loading [data-price] { opacity: .5; }
.cmjc-setting__price { font-size: 1.5rem; font-weight: 600; color: var(--wp--preset--color--navy, #10143c); margin: .25rem 0 1rem; }
.cmjc-setting__gone { margin: .5rem 0 1rem; }
.cmjc-setting__group { margin: 0 0 1.1rem; }
.cmjc-setting__label { display: block; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--periwinkle, #7178bc); margin: 0 0 .45rem; }
.cmjc-setting__label span { color: var(--wp--preset--color--ink, #222); text-transform: none; letter-spacing: 0; font-size: .85rem; margin-left: .35rem; }
.cmjc-setting__chips { display: flex; flex-wrap: wrap; gap: .4rem; }

.cmjc-chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid #cfd3e6; border-radius: 4px; padding: .35rem .6rem; font-size: .85rem; line-height: 1.2; color: var(--wp--preset--color--ink, #222); background: #fff; text-decoration: none; }
.cmjc-chip:hover { border-color: var(--wp--preset--color--indigo, #151d6e); text-decoration: none; }
.cmjc-chip.is-on { border-color: var(--wp--preset--color--indigo, #151d6e); background: var(--wp--preset--color--mist, #f0f5fa); color: var(--wp--preset--color--indigo, #151d6e); font-weight: 600; }
.cmjc-chip--shape { flex-direction: column; width: 4.6rem; padding: .4rem .2rem; font-size: .72rem; text-align: center; }
.cmjc-chip--shape svg { width: 2rem; height: 2rem; }
.cmjc-chip--shape .cmjc-shape__girdle { fill: none; stroke: currentColor; stroke-width: 1.6; }
.cmjc-chip--shape .cmjc-shape__facets { fill: none; stroke: currentColor; stroke-width: .7; opacity: .6; }


/* Dropdowns (center stone, metal): a <details> whose panel holds the options as links. */
.cmjc-select { position: relative; max-width: 22rem; }
.cmjc-select__button { display: flex; align-items: center; gap: .55rem; padding: .55rem .75rem; border: 1px solid #cfd3e6; border-radius: 4px; background: #fff; color: var(--wp--preset--color--ink, #222); font-size: .9rem; cursor: pointer; list-style: none; }
.cmjc-select__button::-webkit-details-marker { display: none; }
.cmjc-select__button::after { content: ''; display: inline-block; margin-left: auto; width: .45rem; height: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-25%) rotate(45deg); }
.cmjc-select[open] .cmjc-select__button::after { transform: translateY(25%) rotate(225deg); }
.cmjc-select__button:hover, .cmjc-select[open] .cmjc-select__button { border-color: var(--wp--preset--color--indigo, #151d6e); }
.cmjc-select__button:focus-visible { outline: 2px solid var(--wp--preset--color--indigo, #151d6e); outline-offset: 2px; }
.cmjc-select__panel { position: absolute; z-index: 20; top: calc(100% + .25rem); left: 0; right: 0; max-height: 20rem; overflow-y: auto; padding: .35rem 0; background: #fff; border: 1px solid #cfd3e6; border-radius: 4px; box-shadow: 0 8px 24px rgba(16, 20, 60, .12); }
.cmjc-select__heading { margin: .55rem .75rem .2rem; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--periwinkle, #7178bc); }
.cmjc-select__option { display: flex; align-items: center; gap: .55rem; padding: .45rem .75rem; font-size: .88rem; line-height: 1.3; color: var(--wp--preset--color--ink, #222); text-decoration: none; }
/* The theme underlines and recolours links on hover; options keep their own look. */
.cmjc-setting .cmjc-select__option:hover, .cmjc-setting .cmjc-select__option:focus-visible { background: var(--wp--preset--color--mist, #f0f5fa); color: var(--wp--preset--color--ink, #222); text-decoration: none; }
.cmjc-setting .cmjc-select__option.is-on, .cmjc-setting .cmjc-select__option.is-on:hover { font-weight: 600; color: var(--wp--preset--color--indigo, #151d6e); }
.cmjc-select__option.is-on::after { content: '\2713'; margin-left: auto; }
.cmjc-select__option.is-off { opacity: .45; cursor: not-allowed; }
.cmjc-select__option.is-off::after { content: 'not in this size'; margin-left: auto; font-size: .72rem; }
.cmjc-select__swatch { display: inline-block; flex: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }

.cmjc-chip:focus-visible, .cmjc-setting-gallery__thumb:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.cmjc-select__option:focus-visible { outline: 2px solid var(--wp--preset--color--indigo, #151d6e); outline-offset: -2px; }
.cmjc-setting__error { margin: 0 0 1rem; font-size: .9rem; color: #8a1f1f; }

.cmjc-setting__ring select { min-width: 12rem; padding: .45rem .5rem; border: 1px solid #cfd3e6; border-radius: 4px; background: #fff; }
.cmjc-setting .cmjc-setting__ask { width: 100%; margin-top: .5rem; }
.cmjc-setting__note { font-size: .8rem; color: #666; margin-top: .6rem; }

.cmjc-setting-gallery__main { position: relative; display: block; background: var(--wp--preset--color--cloud, #f9f9f9); border-radius: 4px; overflow: hidden; }
.cmjc-setting-gallery__main img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; transition: opacity .25s ease, filter .2s ease; }
.cmjc-setting-gallery__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; margin-top: .5rem; }
/* The theme paints every <button> navy (woocommerce-block-theme-has-button-styles); undo that for thumbnails. */
body .cmjc-setting-gallery .cmjc-setting-gallery__thumb { position: relative; overflow: hidden; padding: 0; border: 1px solid transparent; border-radius: 3px; background: var(--wp--preset--color--cloud, #f9f9f9); color: inherit; cursor: pointer; box-shadow: none; }
body .cmjc-setting-gallery .cmjc-setting-gallery__thumb.is-on { border-color: var(--wp--preset--color--indigo, #151d6e); }
.cmjc-setting-gallery__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; transition: opacity .25s ease; }
.cmjc-setting-gallery--empty { min-height: 1px; }

/* Waiting on a photo: the current one stays, dimmed, under a soft sweep; empty thumbnails sweep until they load. */
.cmjc-setting-gallery__main.is-swapping img { opacity: .55; }
.cmjc-setting-gallery__thumb.is-loading img { opacity: 0; }
.cmjc-setting-gallery__main.is-swapping::after,
.cmjc-setting-gallery__thumb.is-loading::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .6) 50%, transparent 80%); background-size: 200% 100%; animation: cmjc-sweep 1.2s linear infinite; }
@keyframes cmjc-sweep { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* Instant metal change: the photo on screen tinted toward the new metal (not dimmed) until the real one is shown. */
.cmjc-setting-gallery__main[data-tint].is-swapping img { opacity: 1; }
.cmjc-setting-gallery__main[data-tint].is-swapping::after { display: none; }
.cmjc-setting-gallery__main[data-tint="white-yellow"] img { filter: sepia(.6) saturate(2) hue-rotate(-12deg) brightness(1.03); }
.cmjc-setting-gallery__main[data-tint="white-rose"] img { filter: sepia(.5) saturate(1.7) hue-rotate(-38deg) brightness(1.03); }
.cmjc-setting-gallery__main[data-tint="yellow-white"] img,
.cmjc-setting-gallery__main[data-tint="rose-white"] img { filter: saturate(.05) brightness(1.06); }
.cmjc-setting-gallery__main[data-tint="yellow-rose"] img { filter: hue-rotate(-24deg) saturate(1.1); }
.cmjc-setting-gallery__main[data-tint="rose-yellow"] img { filter: hue-rotate(20deg) saturate(1.1); }
@media (prefers-reduced-motion: reduce) {
	.cmjc-setting-gallery__main.is-swapping::after,
	.cmjc-setting-gallery__thumb.is-loading::after { animation: none; }
	.cmjc-setting-gallery__main img, .cmjc-setting-gallery__thumb img { transition: none; }
}

.cmjc-setting-specs, .cmjc-setting-ask { clear: both; max-width: 760px; margin: 2rem 0; }
.cmjc-setting-specs h2, .cmjc-setting-ask h2 { font-size: 1.25rem; }
.cmjc-setting-specs dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.5rem; margin: 0; }
.cmjc-setting-specs dt { color: #666; }
.cmjc-setting-specs dd { margin: 0; }
.cmjc-setting-from { font-weight: 600; }

@media (max-width: 767px) {
	.cmjc-chip--shape { width: 4.1rem; }
	.cmjc-setting-gallery__thumbs { grid-template-columns: repeat(4, 1fr); }
}

/* Gift pieces (gift.js): an option with no piece for the other choices still works (the others move to the
   nearest piece), so it is only faded; and the quantity + add-to-cart row. */
.cmjc-select__option.is-other { opacity: .6; }
.cmjc-gift__buy { display: flex; gap: .6rem; align-items: center; margin-top: .75rem; max-width: 22rem; }
.cmjc-gift__buy .quantity { margin: 0; }
/* WooCommerce's styles pad the quantity input ~18px a side and outrank ours, which hid the number in the narrow box: our padding and size win with !important; same height as the button. */
body .cmjc-gift__buy .quantity input.qty { box-sizing: border-box !important; width: 4.5rem !important; min-width: 4.5rem; max-width: none; height: 3rem !important; margin: 0; padding: 0 .35rem !important; border: 1px solid #cfd3e6; border-radius: 4px; background: #fff; color: var(--wp--preset--color--ink, #222); font-size: 1rem; line-height: 1; text-align: center; }
body .cmjc-gift__buy .single_add_to_cart_button { flex: 1; height: 3rem; min-height: 3rem; margin: 0; padding-top: 0; padding-bottom: 0; }

/* Chain menu on pendant pages (gift-chains.php): each option shows a close-up of the chain's links. */
.cmjc-chain__option { gap: .65rem; }
.cmjc-chain__snip { flex: none; width: 4.5rem; height: 2.25rem; border-radius: 4px; background-color: #fff; background-repeat: no-repeat; background-size: 700%; background-position: 90% 68%; box-shadow: inset 0 0 0 1px rgba(16, 20, 60, .1); }
/* Stuller's chain photos lay two strands across, clasps on the left: by default the frame sits on the plain end of the lower strand; gift.js refines it per photo. */
.cmjc-chain__snip--none { background: transparent; box-shadow: inset 0 0 0 1px rgba(16, 20, 60, .2); background-image: linear-gradient(135deg, transparent 47%, rgba(16, 20, 60, .25) 47%, rgba(16, 20, 60, .25) 53%, transparent 53%); }
.cmjc-chain__name { flex: 1; }
.cmjc-chain__price { margin-left: auto; font-size: .8rem; color: #555; white-space: nowrap; }
.cmjc-chain__option.is-off::after { content: none; }
.cmjc-select--chain .cmjc-select__option.is-on::after { margin-left: .4rem; }
.cmjc-chain__length { margin-top: .7rem; }
.cmjc-chain__length select { min-width: 8rem; padding: .45rem .5rem; border: 1px solid #cfd3e6; border-radius: 4px; background: #fff; }
.cmjc-chain__note { margin: -.6rem 0 1rem; font-size: .8rem; color: #666; }

/* "View chain details" and its pop-up (a <dialog>; gift.js). */
.cmjc-chain__more-wrap { margin: .5rem 0 0; }
.cmjc-setting a.cmjc-chain__more { font-size: .85rem; color: var(--wp--preset--color--indigo, #151d6e); text-decoration: underline; text-underline-offset: 2px; }
.cmjc-modal { width: min(52rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: 6px; box-shadow: 0 20px 60px rgba(16, 20, 60, .3); color: var(--wp--preset--color--ink, #222); }
.cmjc-modal::backdrop { background: rgba(16, 20, 60, .55); }
.cmjc-modal__box { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; padding: 1.5rem; }
body .cmjc-modal .cmjc-modal__close { position: absolute; top: .5rem; right: .6rem; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--wp--preset--color--ink, #222); font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: none; }
body .cmjc-modal .cmjc-modal__close:hover { background: var(--wp--preset--color--mist, #f0f5fa); }
.cmjc-modal__main { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: var(--wp--preset--color--cloud, #f9f9f9); border-radius: 4px; }
.cmjc-modal__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; margin-top: .5rem; }
body .cmjc-modal .cmjc-modal__thumb { padding: 0; border: 1px solid transparent; border-radius: 3px; background: var(--wp--preset--color--cloud, #f9f9f9); cursor: pointer; box-shadow: none; }
body .cmjc-modal .cmjc-modal__thumb.is-on { border-color: var(--wp--preset--color--indigo, #151d6e); }
.cmjc-modal__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.cmjc-modal__title { margin: .25rem 2rem .5rem 0; font-size: 1.35rem; }
.cmjc-modal__price { margin: 0 0 1rem; color: #555; }
.cmjc-modal__specs { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; margin: 0 0 1.25rem; font-size: .9rem; }
.cmjc-modal__specs dt { color: #666; }
.cmjc-modal__specs dd { margin: 0; }
.cmjc-modal a.cmjc-modal__page { font-size: .9rem; color: var(--wp--preset--color--indigo, #151d6e); text-decoration: underline; }
@media (max-width: 640px) {
	.cmjc-modal__box { grid-template-columns: 1fr; padding: 1rem; gap: 1rem; }
}