/* Product page presentation.
 *
 * Scoped under .dcj-pd (added to body_class on product pages) so nothing here can leak onto a
 * cart, checkout or archive page.
 *
 * The price work is deliberately NOT in this file. Blocksy prints the range into its own
 * element and WooCommerce writes the chosen variation's price into a different node lower down
 * the page; no stylesheet can join two nodes together, so that is handled in product-details.js.
 *
 * Type and colour are taken from the theme rather than invented here, so these elements look
 * native to the shop instead of borrowed from somewhere else. The theme exposes its UI face as
 * --theme-form-font-family (it uses Montserrat for prices, tab titles and product meta) and its
 * whole palette as --theme-palette-color-1..8. Section headings are League Spartan 700, which is
 * what the theme puts on every h1-h5, so that is named directly with the theme stack as backup.
 */

.dcj-pd {
	--pd-ink: var(--theme-palette-color-8, #1a1613);
	--pd-muted: var(--theme-palette-color-6, #69625d);
	--pd-gold: var(--theme-palette-color-3, #d4af37);
	--pd-gold-deep: var(--theme-palette-color-5, #734b00);
	--pd-cream: var(--theme-palette-color-7, #f8f3ee);
	--pd-shell: var(--theme-palette-color-1, #f5e9e5);
	--pd-line: rgba(26, 22, 19, 0.12);
	--pd-face: var(--theme-form-font-family, 'Montserrat', sans-serif);
	--pd-display: 'League Spartan', var(--theme-font-family, sans-serif);
}

.dcj-pd .woocommerce-product-details__short-description {
	/* The same text is served in the Description tab. Keeping both means the buyer reads it
	 * twice within one screenful, so only the tab copy survives. */
	display: none;
}

/* ------------------------------------------------------------- swatch picker */

/* Only applied by product-details.js, and only once the swatches have been built, so a customer
 * without JavaScript still has a working dropdown rather than no way to choose at all. */
.dcj-pd-swatches .variations td.value select {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The stock table label is replaced by the swatch label, which sits directly above the buttons
 * as a subtitle, so the row reads as "Gold" then the choices rather than as a table. */
.dcj-pd-swatches .variations tr th.label {
	display: none;
}

/* WooCommerce's "Clear" link. product-details.js removes it from the document once the swatches
 * are built; this is the guard for the window in between and for any styling of its own. Clicking
 * an already-selected swatch resets the same state, so nothing is lost by it being gone. */
.dcj-pd-swatches .variations a.reset_variations {
	display: none;
}

.dcj-pd-swatches .variations td.value {
	padding: 0 0 1.1rem;
	width: 100%;
}

.dcj-pd-swatches .variations tr + tr td.value {
	padding-top: 0.2rem;
}

.dcj-pd-swatches__group {
	display: block;
}

.dcj-pd-swatches__label {
	display: block;
	margin: 0 0 0.6rem;
	font-family: var(--pd-face);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pd-muted);
}

.dcj-pd-swatches__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.dcj-pd-swatches__item {
	appearance: none;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.62rem 1.25rem;
	font-family: var(--pd-face);
	font-size: 0.84rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.25;
	color: var(--pd-ink);
	text-align: center;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid var(--pd-line);
	border-radius: 999px;
	transition:
		border-color 0.2s ease,
		color 0.2s ease,
		background-color 0.2s ease,
		box-shadow 0.2s ease;
}

.dcj-pd-swatches__item:hover,
.dcj-pd-swatches__item:focus-visible {
	border-color: rgba(212, 175, 55, 0.55);
	color: var(--pd-gold-deep);
	background: rgba(255, 255, 255, 0.9);
	outline: none;
}

.dcj-pd-swatches__item:focus-visible {
	box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.28);
}

/* Chosen: a gold rim and a warm wash. Deliberately not a solid fill - Add to cart is the only
 * solid element on the page, and a filled pill here would compete with it. */
.dcj-pd-swatches__item--selected {
	color: var(--pd-gold-deep);
	background: rgba(212, 175, 55, 0.1);
	border-color: var(--pd-gold);
	font-weight: 600;
}

.dcj-pd-swatches__item--unavailable {
	color: var(--pd-muted);
	cursor: not-allowed;
	opacity: 0.45;
	border-style: dashed;
}

.dcj-pd-swatches__item--unavailable:hover {
	border-color: var(--pd-line);
	color: var(--pd-muted);
	box-shadow: none;
}

/* A soft diagonal sheen across the unselected pills, so they catch light like a polished
 * surface instead of reading as flat rectangles. Withheld on the chosen pill, where the gold rim
 * and wash are already carrying the state. */
.dcj-pd-swatches__item::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(
		115deg,
		rgba(255, 255, 255, 0.45) 0%,
		rgba(255, 255, 255, 0) 45%
	);
	pointer-events: none;
}

.dcj-pd-swatches__item--selected::after,
.dcj-pd-swatches__item--unavailable::after {
	content: none;
}

/* The dot is shaded, not filled flat: a metal tone lit from the upper left reads as polished
 * gold or platinum, where a single flat hex reads as a printed circle. Each key is set by
 * product-details.js from the option text, and the offsets of light and shade are what sell it. */
.dcj-pd-swatches__item--colour {
	padding-left: 0.6rem;
}

.dcj-pd-swatches__item--colour::before {
	content: "";
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background:
		radial-gradient(
			circle at 32% 28%,
			var(--pd-dot-hi, #fff) 0%,
			var(--pd-dot-mid, #ccc) 42%,
			var(--pd-dot-lo, #888) 100%
		);
	border: 1px solid rgba(26, 22, 19, 0.16);
	box-shadow:
		inset 0 -1px 2px rgba(0, 0, 0, 0.18),
		0 1px 2px rgba(26, 22, 19, 0.14);
}

.dcj-pd-swatches__item--colour[data-colour="yellow"] {
	--pd-dot-hi: #fff3c4;
	--pd-dot-mid: #e0bd55;
	--pd-dot-lo: #9c7715;
}

.dcj-pd-swatches__item--colour[data-colour="white"] {
	--pd-dot-hi: #ffffff;
	--pd-dot-mid: #eceae5;
	--pd-dot-lo: #b4b1a9;
}

.dcj-pd-swatches__item--colour[data-colour="rose"] {
	--pd-dot-hi: #fbe6de;
	--pd-dot-mid: #dfa894;
	--pd-dot-lo: #a9715e;
}

.dcj-pd-swatches__item--colour[data-colour="black"] {
	--pd-dot-hi: #6e6a66;
	--pd-dot-mid: #35322f;
	--pd-dot-lo: #171614;
}

.dcj-pd-swatches__item--colour[data-colour="blue"] {
	--pd-dot-hi: #9ec4e8;
	--pd-dot-mid: #4a76a4;
	--pd-dot-lo: #23415e;
}

.dcj-pd-swatches__item--colour[data-colour="red"] {
	--pd-dot-hi: #e6a0a0;
	--pd-dot-mid: #a83c3c;
	--pd-dot-lo: #6b1f1f;
}

.dcj-pd-swatches__item--colour[data-colour="green"] {
	--pd-dot-hi: #a8d6b0;
	--pd-dot-mid: #3f7a4c;
	--pd-dot-lo: #1f4527;
}

.dcj-pd-swatches__item--colour[data-colour="neutral"] {
	--pd-dot-hi: #f4f1ec;
	--pd-dot-mid: #cfc8bd;
	--pd-dot-lo: #96897a;
}

/* On the chosen pill the dot gets a thin gold ring so it stays legible against the warm wash. */
.dcj-pd-swatches__item--colour.dcj-pd-swatches__item--selected::before {
	border-color: rgba(212, 175, 55, 0.85);
	box-shadow:
		inset 0 -1px 2px rgba(0, 0, 0, 0.16),
		0 0 0 1px rgba(212, 175, 55, 0.5);
}

@media (max-width: 480px) {
	.dcj-pd-swatches__list {
		gap: 0.4rem;
	}

	.dcj-pd-swatches__item {
		flex: 1 1 auto;
		justify-content: center;
		padding: 0.6rem 0.85rem;
	}
}

/* ------------------------------------------------------------ spec strip */

/* Held to a readable measure and centred, rather than running the full width of the page the way
 * a table row would. Three facts do not need the whole viewport to be legible, and a contained
 * block reads as a deliberate panel instead of a full-bleed band under the tabs. */
.dcj-pd-specs {
	max-width: 60rem;
	margin: 3.5rem auto 0;
}

/* The heading is the one piece of chrome on the page, so it gets a box of its own: the theme's
 * display face at the weight the theme uses for every h1-h5, in the deep gold the theme uses for
 * prices, on a gold hairline. Sit it in the middle of the panel above the values. */
.dcj-pd-specs__heading {
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 1.5rem;
	padding: 0.62rem 1.75rem;
	font-family: var(--pd-display);
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
	text-align: center;
	color: var(--pd-gold-deep);
	background: var(--pd-cream);
	border: 1px solid var(--pd-gold);
}

.dcj-pd-specs__grid {
	display: grid;
	gap: 1px;
	margin: 0;
	background: var(--pd-line);
	border: 1px solid var(--pd-line);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dcj-pd-specs--2 .dcj-pd-specs__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dcj-pd-specs--4 .dcj-pd-specs__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* The gap plus the shared background draws the dividing lines, so there are no double borders
 * and no uneven seams between cells. */
.dcj-pd-specs__item {
	margin: 0;
	padding: 1.6rem 1.4rem;
	text-align: center;
	background: var(--pd-cream);
}

/* Drawn as a mask rather than a background image, so the mark takes the element's own colour:
 * no second request, and the gold comes from the same variable the rest of the panel uses. */
.dcj-pd-specs__icon {
	display: block;
	width: 26px;
	height: 26px;
	margin: 0 auto 0.9rem;
	background-color: var(--pd-gold-deep);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	opacity: 0.7;
}

/* Inline SVG rather than icon-font or PNGs: no extra requests, and a mask means the mark takes
 * whatever colour it is given, so it stays legible if the palette changes. */
.dcj-pd-icon--weight {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l3 6v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V9z'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M10 14h4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l3 6v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V9z'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M10 14h4'/%3E%3C/svg%3E");
}

.dcj-pd-icon--diamond {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 12L2 9z'/%3E%3Cpath d='M2 9h20'/%3E%3Cpath d='M6 3l4 18 4-18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 12L2 9z'/%3E%3Cpath d='M2 9h20'/%3E%3Cpath d='M6 3l4 18 4-18'/%3E%3C/svg%3E");
}

/* Half-filled disc for clarity: the empty half is the colourless side, the filled half the
 * graded side. Reads at 26px, which a plain filled circle did not. */
.dcj-pd-icon--clarity,
.dcj-pd-icon--colour,
.dcj-pd-icon--color {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M12 3a9 9 0 0 1 0 18z' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M12 3a9 9 0 0 1 0 18z' fill='%23000'/%3E%3C/svg%3E");
}

.dcj-pd-specs__label {
	margin: 0 0 0.4rem;
	font-family: var(--pd-face);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pd-muted);
}

.dcj-pd-specs__value {
	margin: 0;
	font-family: var(--pd-face);
	font-size: 1.02rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--pd-ink);
}

/* Two side-by-side columns stop being readable on a phone, so stack them. */
@media (max-width: 680px) {
	.dcj-pd-specs__grid,
	.dcj-pd-specs--2 .dcj-pd-specs__grid,
	.dcj-pd-specs--4 .dcj-pd-specs__grid {
		grid-template-columns: 1fr;
	}

	.dcj-pd-specs__item {
		display: grid;
		grid-template-columns: auto 1fr;
		text-align: left;
		align-items: center;
		column-gap: 1rem;
		padding: 1.1rem 1.25rem;
	}

	.dcj-pd-specs__icon {
		margin: 0;
		grid-row: span 2;
	}

	.dcj-pd-specs__label {
		margin: 0;
	}
}

/* --------------------------------------------------------------- help + CTA */

/* ------------------------------------------------------------- customise line */

/* Immediately above Add to cart. Faded on purpose: it is an offer, not a competing action, so
 * it reads as a note the customer may take up rather than a button asking to be pressed. */
.dcj-pd-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.5rem;
	margin: 0 0 0.85rem;
	font-family: var(--pd-face);
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--pd-muted);
}

.dcj-pd-cta__text {
	opacity: 0.85;
}

.dcj-pd-cta__link {
	color: var(--pd-gold-deep);
	text-decoration: none;
	border-bottom: 1px solid rgba(212, 175, 55, 0.45);
	/* Lighter than the contact links below, so the two lines do not carry equal weight. */
	opacity: 0.88;
	transition: opacity 0.18s ease, border-color 0.18s ease;
}

.dcj-pd-cta__link:hover,
.dcj-pd-cta__link:focus-visible {
	opacity: 1;
	border-bottom-color: var(--pd-gold);
	outline: none;
}

/* --------------------------------------------------------------- contact line */

/* One line below Add to cart. Add to cart stays the only solid, unmissable control on the page;
 * everything here is a text link with a small icon. */
.dcj-pd-contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 0.75rem;
	margin: 1.15rem 0 0;
	padding-top: 0.9rem;
	border-top: 1px solid var(--pd-line);
	font-family: var(--pd-face);
	font-size: 0.88rem;
	line-height: 1.6;
}

.dcj-pd-contact__label {
	color: var(--pd-muted);
	opacity: 0.85;
}

.dcj-pd-contact__links {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 1.15rem;
}

.dcj-pd-contact__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--pd-ink);
	text-decoration: none;
	transition: color 0.18s ease;
}

.dcj-pd-contact__link:hover,
.dcj-pd-contact__link:focus-visible {
	color: var(--pd-gold-deep);
	outline: none;
}

/* A small middot between links reads as a separator without the weight of pipes or bullets. */
.dcj-pd-contact__link + .dcj-pd-contact__link::before {
	content: "\00b7";
	margin-right: 1.15rem;
	color: var(--pd-line);
}

/* A mask rather than a background image, so the mark inherits the link's colour: it lights up
 * with the words on hover, and follows the palette if the shop's colours are ever changed. */
.dcj-pd-contact__icon {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	/* The icon is one step lighter than its label, so the words lead. */
	opacity: 0.6;
	transition: opacity 0.18s ease;
}

.dcj-pd-contact__link:hover .dcj-pd-contact__icon {
	opacity: 1;
}

/* Rounded speech bubble with a handset inside - the shape people already recognise as WhatsApp
 * without it having to carry the brand's exact mark. */
.dcj-pd-contact__link--whatsapp .dcj-pd-contact__icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.9c-5 0-9 3.8-9 8.5 0 1.5.4 3 1.2 4.3L2.9 21.4l5.9-1.4c1.3.7 2.8 1.1 4.4 1.1 5 0 9-3.8 9-8.5S19.2 2.9 12 2.9z'/%3E%3Cpath d='M8.9 8.6c.3 2.4 2.6 4.7 5 5l.9-1.3 1.9.8-.2 1.5c-.1.8-.8 1.4-1.6 1.3-3.7-.4-6.6-3.3-7-7-.1-.8.5-1.5 1.3-1.6l1.5-.2.8 1.9-1.3.9z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.9c-5 0-9 3.8-9 8.5 0 1.5.4 3 1.2 4.3L2.9 21.4l5.9-1.4c1.3.7 2.8 1.1 4.4 1.1 5 0 9-3.8 9-8.5S19.2 2.9 12 2.9z'/%3E%3Cpath d='M8.9 8.6c.3 2.4 2.6 4.7 5 5l.9-1.3 1.9.8-.2 1.5c-.1.8-.8 1.4-1.6 1.3-3.7-.4-6.6-3.3-7-7-.1-.8.5-1.5 1.3-1.6l1.5-.2.8 1.9-1.3.9z'/%3E%3C/svg%3E");
}

/* A solid handset silhouette rather than an outline: it reads as a mark at 17px, where an
 * outline handset just reads as a smudge. */
.dcj-pd-contact__link--phone .dcj-pd-contact__icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.3 1z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.3 1z'/%3E%3C/svg%3E");
}

@media (max-width: 480px) {
	.dcj-pd-contact,
	.dcj-pd-cta {
		font-size: 0.85rem;
	}

	.dcj-pd-contact__links {
		width: 100%;
	}
}

/* ------------------------------------------------- live price presentation */

/* Applied by product-details.js only once a variation is chosen, so the headline price stops
 * looking like a range. Kept as a hook for the transition rather than a hard swap. */
.dcj-pd-price--live {
	transition: opacity 0.15s ease;
}

.dcj-pd-price--updating {
	opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
	.dcj-pd-swatches__item,
	.dcj-pd-contact__link,
	.dcj-pd-price--live {
		transition: none;
	}
}