/*
 * Product gallery presentation.
 *
 * The breadcrumb here is the copy rendered above the gallery by
 * includes/product-gallery.php. It carries .pearlory-crumb rather than the
 * theme's .breadcrumbs class, so none of Flatsome's breadcrumb typography
 * applies and every value below is stated outright.
 */

/*
 * Trail spacing.
 *
 * Only a top margin here. The gap below comes from .product-main's padding-top,
 * set 20 lines down in this same file, and adding a bottom margin as well stacked
 * the two into 24px. The pair is what to look at if this ever needs changing.
 *
 * The top margin separates the trail from WooCommerce's added-to-cart notice,
 * which appears directly above it after an add and carries its own background.
 */
.pearlory-crumb {
	margin: 12px 0 0;
}

/*
 * Flatsome gives .product-main 40px of vertical padding, which was the whole
 * gap between the header and the image before the trail existed. Left alone it
 * becomes a 40px gap between the trail and the image, against 12px in the
 * reference. The override is scoped to mobile, where the space above the fold
 * is worth reclaiming. Desktop keeps the theme's 40px.
 */
@media (max-width: 849px) {
	.single-product .product-main {
		padding-top: 12px;
	}
}

.pearlory-crumb__trail {
	display: block;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	margin: 0;
	padding: 0;
	color: rgba(0, 0, 0, 0.92);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: 0;
	text-transform: none;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

/* The trail scrolls sideways when it is longer than the screen. A visible
   scrollbar under 13px of text reads as a defect, so it is hidden and the
   row stays swipeable. */
.pearlory-crumb__trail::-webkit-scrollbar {
	display: none;
}

.pearlory-crumb__trail a {
	color: rgba(0, 0, 0, 0.56);
	font-size: inherit;
	font-weight: inherit;
	text-decoration: none;
	text-transform: none;
}

.pearlory-crumb__trail a:hover,
.pearlory-crumb__trail a:focus {
	color: rgba(0, 0, 0, 0.92);
}

/* Round separator in place of a slash, matching the reference. The delimiter
   span is emitted empty by the PHP and drawn entirely here. */
.pearlory-crumb__sep {
	display: inline-block;
	width: 2px;
	height: 2px;
	margin: 0 8px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.5);
	vertical-align: middle;
}

/*
 * Thumbnail strip.
 *
 * Flatsome marks the strip show-for-medium, so it is mobile only, and it sits
 * directly above the buy area. The gallery itself is a Flickity slider that
 * already swipes through every image, so the strip is duplicate navigation
 * paid for in the space that matters most.
 */
@media (max-width: 849px) {
	.pearlory-hide-thumbs .product-gallery-stacked-thumbnails {
		display: none;
	}
}

/*
 * Gutter, corners and scroll indicator.
 *
 * Measured against the reference at a 375px viewport: the image sits 8px from
 * each edge rather than the 15px Flatsome gives its columns, the corners are
 * rounded 12px, and a pill of dots sits 10px inside the bottom left corner.
 *
 * The text block below the image keeps its 15px gutter. That is the reference
 * layout too, not an oversight: the image runs wider than the copy.
 */
@media (max-width: 849px) {
	.single-product .product-gallery {
		padding-left: 8px;
		padding-right: 8px;
	}

	/*
	 * The trail lines up with the left edge of the image. It sits inside
	 * Flatsome's .container, which carries 15px of padding, so the 7px pulls it
	 * out to the 8px the gallery now uses. Without this the trail starts at 15px
	 * and nothing on the screen shares an edge with it.
	 */
	.single-product .pearlory-crumb {
		margin-left: -7px;
		margin-right: -7px;
		padding-left: 0;
		padding-right: 0;
	}
}

/* The viewport is the element Flickity clips its slides with, so rounding it
   rounds the visible image without touching the sale badge or the zoom control,
   which are positioned outside it. */
.single-product .product-images .flickity-viewport {
	border-radius: 12px;
}

/*
 * Scroll indicator.
 *
 * Built by assets/js/product-gallery.js because the stacked gallery template
 * hardcodes "pageDots": false with no filter to change it.
 */
.pearlory-gal-dots {
	position: absolute;
	bottom: 10px;
	left: 10px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 4px;
	height: 12px;
	padding: 4px;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.8);
	pointer-events: none;
}

.pearlory-gal-dots__dot {
	display: block;
	width: 6px;
	height: 4px;
	border-radius: 9999px;
	background: rgba(0, 0, 0, 0.18);
	transition: width 0.3s ease, background-color 0.3s ease;
}

.pearlory-gal-dots__dot.is-current {
	width: 16px;
	background: rgba(0, 0, 0, 0.7);
}

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

/*
 * Product title.
 *
 * Flatsome renders it at 22.4px on a phone. The reference sets 17px at weight
 * 600, which reads as a label above the price rather than a headline, and buys
 * back a line of height on a long name. Mobile only: the desktop column is wide
 * enough for the theme's own size.
 */
@media (max-width: 849px) {
	.single-product .product-title.product_title {
		font-size: 17px;
		font-weight: 600;
		line-height: 1.25;
		/*
		 * Near black, not the theme's #555. Measured: Hey Harper sets its title
		 * at rgb(52,50,51) and Atolea at rgb(28,27,27), both close to black. A
		 * mid grey title at the same size reads washed out rather than smaller.
		 */
		color: #1f1f1f;
	}
}


/*
 * Variable product corrections.
 */

/*
 * Variation picker alignment.
 *
 * WooCommerce renders the picker as a table: a th holding the attribute name and
 * a td holding the options. Measured here, the th takes 133px, so the swatches
 * start at x=148 while the title, price, stock line and button all sit flush at
 * x=15. One row indented a third of the way across reads as broken.
 *
 * Unsetting the table display stacks the label over its options and puts both on
 * the same left edge as everything else. This is how both references present a
 * size picker.
 */
.single-product .variations,
.single-product .variations tbody,
.single-product .variations tr,
.single-product .variations th.label,
.single-product .variations td.value {
	display: block;
	width: auto;
	padding: 0;
	text-align: left;
}

.single-product .variations th.label {
	margin: 0 0 8px;
	color: #161616;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
}

.single-product .variations tr + tr th.label {
	margin-top: 16px;
}

/*
 * WooCommerce's Clear link is absolutely positioned at top: -12px inside the
 * variation cell, which lands it exactly where the price block ends and reads as
 * clipped text at the right edge. Put it back in the flow, under the swatches.
 */
.single-product .variations .reset_variations {
	position: static;
	display: inline-block;
	margin: 6px 0 0;
	color: rgba(0, 0, 0, 0.5);
	font-size: 11px;
	letter-spacing: 0.02em;
	text-decoration: underline;
	text-transform: none;
}

/*
 * The currency switcher emits a literal br inside woocs_price_code, which breaks
 * the struck price and the current price onto separate lines. Same cause as the
 * cart drawer fix earlier in this project. Removing the break is the only thing
 * that works: nowrap and display cannot override an element that is itself a
 * line break.
 */
.single-product .product-stacked-info .price br,
.single-product .product-stacked-info .woocs_price_code br {
	display: none;
}

.single-product .product-stacked-info .price .woocs_price_code {
	display: inline;
}

/*
 * The stock line spends 55px on a single 14px row, from 8px top and 15px bottom
 * padding on a flex container. On a variable product the variation row already
 * costs 46px above the button, which pushes it past the fold. Trimming the
 * padding recovers most of that without touching the theme file.
 */
.single-product .country-stock-message {
	padding-top: 2px;
	padding-bottom: 4px;
}