/* Stage: 3D container + image fallback.
   Override the theme's flex centering and padding on the stage so the SDK
   gets a self-contained, predictably-sized box it can fully take over. */
.product-detail__image.hj-threedium-stage { display: block; padding: 0; background: #ffffff; }
.hj-threedium-stage { position: relative; user-select: none; }
.hj-threedium-container { position: relative; width: 100%; aspect-ratio: 1 / 1; min-height: 320px; background: #ffffff; overflow: hidden; }
/* Size canvas and iframe but don't !important-stomp on whatever the SDK does
   internally — that breaks the SDK's pointer coordinate math. */
.hj-threedium-container canvas,
.hj-threedium-container iframe { width: 100%; height: 100%; display: block; border: 0; }
.hj-threedium-image img { width: 100%; height: auto; display: block; }
.hj-threedium-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #5b5b5b; font-size: 14px; pointer-events: none; }
.hj-threedium-spinner { width: 28px; height: 28px; border: 3px solid #d8d3c9; border-top-color: var(--color-orange-band, #ad5c2c); border-radius: 50%; animation: hj-threedium-spin 0.9s linear infinite; }
@keyframes hj-threedium-spin { to { transform: rotate(360deg); } }

/* Leave breathing room when an option set is scrolled into view on open (clears the WP admin bar for logged-in users). */
.hj-threedium-group { scroll-margin-top: 24px; }
.admin-bar .hj-threedium-group { scroll-margin-top: 56px; }

/* Quantity is forced to 1 by the plugin; keep the hidden WooCommerce field out of the layout. */
.product-detail__cart form.cart {
	display: grid;
}
.product-detail__cart form.cart { grid-template-columns: 1fr; }
.product-detail__cart .quantity { display: none !important; }
.product-detail__cart form.cart:has(.quantity input[type="hidden"]) { grid-template-columns: 1fr; }
.product-detail__cart .quantity:has(input[type="hidden"]) { display: none; }
.product-detail__cart form.cart:has(.hj-threedium-quantity) { grid-template-columns: 1fr; }
.product-detail__cart .quantity:has(.hj-threedium-quantity),
.product-detail__cart .quantity .hj-threedium-quantity { display: none; }
.product-detail__cart .single_add_to_cart_button[disabled],
.product-detail__cart .single_add_to_cart_button.button[disabled],
.product-detail__cart .single_add_to_cart_button.button.alt[disabled] {
	background: #c9c9c9 !important;
	color: #fff !important;
	cursor: not-allowed;
	opacity: 1;
}
.product-detail__cart .single_add_to_cart_button.hj-threedium-cart-ready,
.product-detail__cart .single_add_to_cart_button.button.hj-threedium-cart-ready,
.product-detail__cart .single_add_to_cart_button.button.alt.hj-threedium-cart-ready,
.product-detail__cart .single_add_to_cart_button.hj-threedium-cart-ready:hover,
.product-detail__cart .single_add_to_cart_button.button.hj-threedium-cart-ready:hover,
.product-detail__cart .single_add_to_cart_button.button.alt.hj-threedium-cart-ready:hover,
.product-detail__cart .single_add_to_cart_button.hj-threedium-cart-ready:focus,
.product-detail__cart .single_add_to_cart_button.button.hj-threedium-cart-ready:focus,
.product-detail__cart .single_add_to_cart_button.button.alt.hj-threedium-cart-ready:focus {
	background: #000 !important;
	color: #fff !important;
	cursor: pointer;
}
.hj-threedium-cart-edit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: #333;
	text-decoration: none;
}
.hj-threedium-cart-edit:hover,
.hj-threedium-cart-edit:focus {
	color: #000;
}
.hj-threedium-cart-edit svg {
	display: block;
}

/* Thumbnails */
.hj-threedium-thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.hj-threedium-thumb { background: none; border: 1px solid #000; padding: 0; cursor: pointer; border-radius: 0; overflow: hidden; }
.hj-threedium-thumb img { display: block; width: 64px; height: 64px; object-fit: cover; }
.hj-threedium-thumb.product-detail__thumb--active { border-color: #000; }
.hj-threedium-thumb--3d { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: #fff; }
.hj-threedium-thumb--3d img { width: 36px; height: auto; display: block; }

/* Options panel */
.hj-threedium-options { display: flex; flex-direction: column; gap: 8px; }
.hj-threedium-group__desc { margin: 4px 14px 8px; color: #5b5b5b; font-size: 14px; }

/* Swatch / radio buttons */
.hj-threedium-swatches { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 14px 14px; }
.hj-threedium-swatch { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: #fff; border: 1px solid #d8d3c9; border-radius: 999px; cursor: pointer; font: inherit; color: inherit; }
.hj-threedium-swatch:hover { border-color: #000; }
.hj-threedium-swatch.is-active { border-color: #000; box-shadow: 0 0 0 1px #000 inset; }
.hj-threedium-swatch__visual { display: block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); overflow: hidden; flex: 0 0 auto; }
.hj-threedium-swatch__visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Add-on price deltas (every option after the first in a list): burnt orange,
   on their own line below the option title, matching the Greek engraving
   price note. The first option is the included base and shows no price. */
.hj-threedium-swatch { flex-wrap: wrap; }
.hj-threedium-swatch__price {
	flex-basis: 100%;
	margin-left: 22px;
	font-size: 0.85em;
	color: var(--color-orange, #bf5700);
}
/* Metal options: no price under the swatches — the selected metal's price is
   shown beside the selection-card title instead (see updateSelectionCard).
   display:none keeps the server-formatted price in the DOM for the JS to read. */
.hj-threedium-group[data-hj-group="metal"] .hj-threedium-swatch__price { display: none; }
/* Choice-circle lists are column layouts: image → title → price. */
.hj-threedium-group--choice-circles .hj-threedium-swatch { flex-wrap: nowrap; }
.hj-threedium-group--choice-circles .hj-threedium-swatch__visual { order: 0; }
.hj-threedium-group--choice-circles .hj-threedium-swatch__label { order: 1; }
.hj-threedium-group--choice-circles .hj-threedium-swatch__price {
	order: 2;
	flex-basis: auto;
	margin: 0;
}

.hj-threedium-group--choice-circles .hj-threedium-swatches {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
	gap: 26px 18px;
	padding: 12px 20px 24px;
}
.hj-threedium-group--choice-circles .hj-threedium-swatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: 0;
	border: 0 !important;
	border-radius: 0;
	background: transparent;
	box-shadow: none !important;
	text-align: center;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
}
.hj-threedium-group--choice-circles .hj-threedium-swatch__visual {
	box-sizing: border-box;
	width: 74px;
	height: 74px;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}

.hj-threedium-group[data-hj-group="ribbon"] .hj-threedium-swatch__visual {
	display: none;
}
.hj-threedium-group--choice-circles .hj-threedium-swatch.is-active .hj-threedium-swatch__visual {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2d2d2d;
}
.hj-threedium-group--choice-circles .hj-threedium-swatch.is-active .hj-threedium-swatch__label {
	font-weight: 800;
}
.hj-threedium-selection-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin: 0 20px 22px;
	padding: 16px 0 0;
	border-top: 2px solid #e0ded9;
}
/* Let the visual + title share the first row while the description drops to its
   own full-width row below, instead of being boxed into the ~2/3 column beside
   the visual. */
.hj-threedium-selection-card__body {
	display: contents;
}
.hj-threedium-selection-card__visual {
	display: block;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2d2d2d;
	flex: 0 0 auto;
}
.hj-threedium-selection-card__visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hj-threedium-selection-card__body {
	min-width: 0;
	font-size: 13px;
	line-height: 1.4;
}
.hj-threedium-selection-card__body strong {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	margin-bottom: 3px;
	font-size: 14px;
	font-weight: 800;
	color: #333;
}
.hj-threedium-selection-card__body p,
.product-option .hj-threedium-selection-card__body p {
	flex-basis: 100%;
	margin: 0;
	padding: 0 !important;
	color: #4b4b4b;
	font-size: 13px;
	line-height: 1.4;
}

.hj-threedium-summary-panel {
	margin-top: 2px;
}
.hj-threedium-summary-panel summary {
	padding: 18px 20px;
	font-size: 16px;
}
.hj-threedium-summary-panel summary strong {
	font-size: 16px;
	font-weight: 400;
	margin-left: auto;
}
.hj-threedium-summary {
	display: grid;
	row-gap: 6px;
	padding: 10px 28px 22px;
	margin: 0;
}
.hj-threedium-summary__row {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	font-size: 14px;
	line-height: 1.35;
}
.hj-threedium-summary__row dt {
	margin: 0;
	font-weight: 800;
	color: #444;
	text-align: right;
	padding-right: 16px;
}
.hj-threedium-summary__row dd {
	margin: 0;
	padding-left: 12px;
	border-left: 1px solid #333;
	color: #444;
}

/* Image grid */
.hj-threedium-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; padding: 4px 14px 14px; }
.hj-threedium-grid__item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px; background: #fff; border: 1px solid #d8d3c9; border-radius: 10px; cursor: pointer; font: inherit; color: inherit; }
.hj-threedium-grid__item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; }
.hj-threedium-grid__item.is-active { border-color: #000; box-shadow: 0 0 0 1px #000 inset; }
.hj-threedium-grid__price { color: var(--color-orange, #bf5700); font-size: 0.85em; }

/* Select */
.hj-threedium-select { box-sizing: border-box; width: calc(100% - 28px); margin: 0 14px 14px; padding: 10px 12px; border: 1px solid #d8d3c9; border-radius: 8px; background: #fff; font: inherit; }

/* Nested child groups (e.g., engraving / symbol under personalization) */
.hj-threedium-children { display: block; margin: 4px 0 0; }
.hj-threedium-child { border-top: 1px solid #ede9df; padding-top: 12px; margin-top: 12px; }
.hj-threedium-child[hidden] { display: none !important; }

/* Text input */
.hj-threedium-text { box-sizing: border-box; width: calc(100% - 28px); margin: 0 14px 6px; padding: 10px 12px; border: 1px solid #d8d3c9; border-radius: 8px; font: inherit; }
.hj-threedium-text-hint { display: flex; align-items: center; gap: 6px; margin: 0 14px 14px; font-size: 12px; color: #6b6b6b; }
.hj-threedium-text-hint__icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: 1px solid #6b6b6b; border-radius: 50%; font-size: 10px; font-weight: 700; line-height: 1; color: #6b6b6b; flex-shrink: 0; }
.hj-threedium-text-label { margin: 0 14px 3px; }

/* Radio input */
.hj-threedium-radio { margin: 12px 20px 24px; }
.hj-threedium-radio-option { margin: 10px 14px 3px 8px; }
.hj-threedium-radio-option label { margin-left: 5px; }
.hj-threedium-radio-option__label { display: block; margin-bottom: 3px; font-size: 14px; font-weight: 800; color: #333; }
.hj-threedium-radio-option__desc { margin: 0; padding: 0 !important; color: #4b4b4b; font-size: 13px; line-height: 1.4; }


/* Save-for-later panel */
.hj-threedium-save { margin-top: 16px; padding: 14px; border: 1px dashed #d8d3c9; border-radius: 10px; background: #fbfaf6; }
.hj-threedium-save__toggle { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--color-orange-band, #ad5c2c); text-decoration: underline; }
.hj-threedium-save__form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.hj-threedium-save__form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.hj-threedium-save__form input[type="email"] { padding: 8px 10px; border: 1px solid #d8d3c9; border-radius: 6px; }
.hj-threedium-save__submit { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-height: 39px; padding: 8px 14px; background: var(--color-orange-band, #ad5c2c); color: #fff; border: 0; border-radius: 6px; line-height: 1; cursor: pointer; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; }
.hj-threedium-save__submit:hover,
.hj-threedium-save__submit:focus { background: #a04800; color: #fff; }
.hj-threedium-save__submit[disabled] { opacity: 0.6; cursor: progress; }
.hj-threedium-save__share { display: flex; gap: 8px; margin-top: 8px; }
.hj-threedium-save__share input { flex: 1; padding: 8px 10px; border: 1px solid #d8d3c9; border-radius: 6px; background: #fff; }
.hj-threedium-save__share button { padding: 8px 14px; background: #1a1a1a; color: #fff; border: 0; border-radius: 6px; cursor: pointer; }

/* ---------- Stepper: additive, gated section progression ---------- */
/* Completed/previous sections stay visible as accordions; only sections that
   haven't been unlocked yet are hidden until the shopper steps into them. */
.hj-threedium-stepper .hj-threedium-group.hj-step--locked { display: none; }

.hj-threedium-stepnav { display: flex; align-items: center; gap: 16px; padding: 16px 20px; }
.hj-threedium-stepnav__link { appearance: none; background: none; border: 0; padding: 4px 2px; font: inherit; font-size: 16px; color: #1a4fa0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.hj-threedium-stepnav__link:hover { color: #123a7a; }
.hj-threedium-stepnav__next { margin-left: auto; }
.hj-threedium-stepnav__text { text-decoration: underline; text-underline-offset: 3px; }
.hj-threedium-stepnav__chev { font-size: 1.7em; line-height: 0; text-decoration: none; }
.hj-threedium-stepnav__link[disabled] { color: #b6b6b6; cursor: not-allowed; }
.hj-threedium-stepnav__link[disabled] .hj-threedium-stepnav__text { text-decoration: none; }
.hj-threedium-stepnav__link[hidden] { display: none; }

/* Engraving font style pills */
.hj-threedium-fonts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 14px 10px; }
.hj-threedium-fonts__label { font-size: 13px; color: #5b5b5b; margin-right: 4px; }
/* Asymmetric vertical padding: the theme's display font carries most of its
   line box in the ascent, so glyphs render optically high — nudge them down. */
.hj-threedium-font { display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px 6px; background: #fff; border: 1px solid #d8d3c9; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; line-height: 1; color: inherit; }
.hj-threedium-font:hover { border-color: #000; }
/* Selected font matches the ribbon option treatment: bolder border, no fill. */
.hj-threedium-font.is-active { border-color: #000; box-shadow: 0 0 0 1px #000 inset; }