/*
 * Product detail accordion.
 *
 * Measured off the reference at a 375px viewport: each row is a 44px control
 * with 12px of padding, a leading icon, a sentence case label at 13px semibold,
 * and a chevron at the far end. The rows sit in a column with 8px between them
 * and carry no dividers. An earlier pass used uppercase labels, 58px rows and
 * hairline rules, which read as a table of contents rather than a designed block.
 *
 * The rows are details elements, so open and close is the browser's own and
 * there is nothing here to script.
 */

/*
 * The accordion sits directly under the benefit list, and the two carry the same
 * three topics. On the reference the equivalent pair is separated by most of a
 * screen of other content, which is what stops it reading as repetition. There
 * is no room for that here, so a rule and a wider margin do the separating: the
 * list is the claim, everything below the rule is the detail behind it.
 */
.pearlory-details {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 22px 0 0;
	padding-top: 20px;
	border-top: 1px solid #e8e6e1;
}

.pearlory-details__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 44px;
	padding: 12px;
	color: #161616;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.35;
	/* Sentence case. The column this sits in sets uppercase, which inherits. */
	text-transform: none;
	cursor: pointer;
	list-style: none;
}

/* Safari draws its own triangle through a shadow pseudo element and Firefox
   through the list marker. Both go, so the chevron is the only indicator. */
.pearlory-details__toggle::-webkit-details-marker {
	display: none;
}

.pearlory-details__toggle::marker {
	content: '';
}

.pearlory-details__toggle:hover {
	background: rgba(0, 0, 0, 0.02);
}

.pearlory-details__toggle:focus-visible {
	outline: 2px solid #161616;
	outline-offset: -2px;
}

.pearlory-details__label {
	display: flex;
	align-items: center;
	gap: 8px;
	/* min-width:0 so a long heading wraps instead of pushing the chevron out */
	min-width: 0;
	flex: 1 1 auto;
	text-align: left;
}

.pearlory-details__icon {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
}

/* Chevron drawn from a rotated square corner, so it needs no font and no file.
   Points down when closed and up when open. */
.pearlory-details__mark {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	position: relative;
}

.pearlory-details__mark::before {
	content: '';
	position: absolute;
	top: 4px;
	left: 4px;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid rgba(0, 0, 0, 0.55);
	border-bottom: 1.5px solid rgba(0, 0, 0, 0.55);
	transform: rotate(45deg);
	transition: transform 0.18s ease;
}

.pearlory-details__row[open] .pearlory-details__mark::before {
	transform: rotate(225deg);
	top: 6px;
}

@media (prefers-reduced-motion: reduce) {
	.pearlory-details__mark::before {
		transition: none;
	}
}

.pearlory-details__body {
	padding: 0 12px 14px;
	color: rgba(0, 0, 0, 0.72);
	font-size: 14px;
	line-height: 1.55;
	/* text-transform inherits, and an ancestor in this column sets uppercase.
	   Product copy has to read as it was written. */
	text-transform: none;
}

.pearlory-details__body > *:last-child {
	margin-bottom: 0;
}

.pearlory-details__prose {
	margin: 0 0 10px;
}

.pearlory-details__note {
	margin: 10px 0 0;
	color: rgba(0, 0, 0, 0.62);
	font-size: 13px;
}

/*
 * Specification table.
 *
 * A definition list, because that is what a label and a value are. Two columns
 * on anything wider than a narrow phone, stacked below that so a long value such
 * as a material description is not squeezed into half the width.
 */
.pearlory-specs {
	margin: 0;
	padding: 0;
}

.pearlory-specs__row {
	display: flex;
	gap: 16px;
	padding: 7px 0;
	border-bottom: 1px solid #f0efec;
}

.pearlory-specs__row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.pearlory-specs dt {
	flex: 0 0 34%;
	margin: 0;
	color: rgba(0, 0, 0, 0.55);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	text-transform: none;
}

.pearlory-specs dd {
	text-transform: none;
	flex: 1 1 auto;
	/* min-width:0 so a long value wraps inside the column rather than forcing
	   the row wider than the page */
	min-width: 0;
	margin: 0;
	color: #161616;
	font-size: 13px;
	line-height: 1.45;
}

/*
 * Below 360px the label and value stack instead of sharing a row. The theme
 * renders dt and dd inline, so the row alone is not enough: without stating the
 * display on the cells too they run together as "ColorGold".
 */
@media (max-width: 359px) {
	.pearlory-specs__row {
		display: block;
	}

	.pearlory-specs dt,
	.pearlory-specs dd {
		display: block;
		width: auto;
	}

	.pearlory-specs dt {
		margin-bottom: 2px;
	}
}

/*
 * The Reviews tab bar.
 *
 * WooCommerce's tab set is down to a single tab here, so its nav is a heading in
 * costume. The bar goes, along with the padding that was holding it apart from
 * the page above. The panel keeps its own "9 reviews for" heading, so nothing
 * loses its label.
 */
.pearlory-has-details .woocommerce-tabs > ul.tabs {
	display: none;
}

/*
 * The theme sets this padding through a shorthand on .woocommerce-tabs.container,
 * which ties on specificity and wins on source order, so the third class is
 * needed to take it. Measured: 122px sat between the accordion and the reviews,
 * made of 30px here, 40px under .product-main, 30px under .product-info and the
 * cart form's own margin.
 */
.pearlory-has-details .woocommerce-tabs.wc-tabs-wrapper {
	padding-top: 0;
}

.pearlory-has-details .woocommerce-tabs .tab-panels {
	padding-top: 0;
}

@media (max-width: 849px) {
	.pearlory-has-details.single-product .product-main {
		padding-bottom: 16px;
	}
}


/*
 * Shipping lines.
 *
 * A plain list. The amount inside a line comes from wc_price(), which carries
 * WooCommerce's own .woocommerce-Price-amount, and the theme sizes that up
 * wherever it appears. Left alone the threshold rendered far larger than the
 * sentence around it, so the size is stated here and the figure simply reads as
 * part of its line.
 */
.pearlory-ship {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pearlory-ship li {
	position: relative;
	margin: 0 0 6px;
	padding-left: 18px;
	font-size: 14px;
	line-height: 1.5;
}

.pearlory-ship li:last-child {
	margin-bottom: 0;
}

/* A small tick drawn from two rules, so it needs no font and no image. */
.pearlory-ship li::before {
	content: '';
	position: absolute;
	top: 7px;
	left: 2px;
	width: 8px;
	height: 4px;
	border-left: 1.5px solid rgba(0, 0, 0, 0.45);
	border-bottom: 1.5px solid rgba(0, 0, 0, 0.45);
	transform: rotate(-45deg);
}

.single-product .pearlory-details .pearlory-ship li .woocommerce-Price-amount,
.single-product .pearlory-details .pearlory-ship li .woocommerce-Price-amount bdi,
.single-product .pearlory-details .pearlory-ship li .woocommerce-Price-currencySymbol,
.single-product .pearlory-details .pearlory-ship li .amount,
.single-product .pearlory-details .pearlory-ship li bdi,
.single-product .pearlory-details .pearlory-ship li span {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	color: #161616;
}