/*!
 * AAAtrails conversion layer — 1.32.0
 *
 * Styles for the four upgrades in this release: the product sub-nav, the
 * listing toolbar, the review breakdown and the card badges.
 *
 * Every value below comes from the existing AAAtrails token set defined in
 * style.css (--forest temple brown, --gold logo gold, --paper warm stock,
 * --line hairline, --radius, --shadow). Nothing introduces a new colour, a
 * new font or a new radius: these components are meant to look like they
 * shipped with the theme, not like a layer bolted on top of it.
 *
 * Loaded by inc/conversion-layer.php, after style.css and detail-polish.css.
 */

/* =========================================================================
   1. Product sub-nav
   ========================================================================= */

/* Sits directly under the sticky site header (64px) and above the page.
   z-index 45 keeps it below the header (60) and above the category rail (40),
   which never appears on the same view anyway. */
.psub {
	position: sticky;
	top: 64px;
	z-index: 45;
	margin: 0 0 6px;
	background: color-mix(in srgb, var(--paper) 92%, transparent);
	backdrop-filter: saturate(1.3) blur(8px);
	border-bottom: 1px solid var(--line);
}

@supports not (background: color-mix(in srgb, red 10%, white)) {
	.psub { background: var(--paper); }
}

.psub__inner {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 58px;
}

.psub__links {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	flex: 1 1 auto;
}

.psub__links::-webkit-scrollbar { display: none; }

.psub__link {
	display: inline-block;
	white-space: nowrap;
	padding: 17px 12px 15px;
	font-size: .93rem;
	font-weight: 500;
	color: var(--ink-soft);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}

.psub__link:hover,
.psub__link:focus-visible {
	color: var(--ink);
}

/* Set by the scroll-spy in assets/js/conversion-layer.js. */
.psub__link.is-current {
	color: var(--forest);
	font-weight: 700;
	border-bottom-color: var(--gold);
}

.psub__book {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
}

.psub__price {
	display: flex;
	align-items: baseline;
	gap: 5px;
	line-height: 1.1;
}

.psub__price small {
	font-size: .7rem;
	color: var(--ink-soft);
}

.psub__price strong {
	font-family: var(--font-display);
	font-size: 1.22rem;
	color: var(--forest);
}

.psub__unit {
	font-size: .75rem;
	color: var(--ink-soft);
}

.psub__cta {
	padding: 10px 20px;
	font-size: .92rem;
}

/* Anchor targets clear both sticky layers instead of hiding under them. */
.tour-main h2[id],
#reviews,
#local-expert,
#faq {
	scroll-margin-top: 132px;
}

@media (max-width: 900px) {
	/* The mobile sticky book bar (.mbook) already owns price + CTA down here,
	   so the sub-nav drops to pure navigation rather than repeating it. */
	.psub__book { display: none; }
	.psub__inner { min-height: 52px; }
	.psub__link { padding: 15px 10px 13px; font-size: .88rem; }
	.tour-main h2[id],
	#reviews { scroll-margin-top: 118px; }
}

/* =========================================================================
   2. Listing toolbar
   ========================================================================= */

.ltbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px 18px;
	margin: 0 0 26px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
}

.ltbar__count {
	margin: 0;
	font-size: .95rem;
	color: var(--ink-soft);
}

.ltbar__count strong {
	color: var(--ink);
	font-weight: 700;
}

.ltbar__sort {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-left: auto;
}

.ltbar__sortlabel {
	font-size: .88rem;
	color: var(--ink-soft);
}

.ltbar__sort select {
	padding: 10px 14px;
	border: 1px solid var(--line);
	border-radius: 100px;
	background: var(--card);
	font: inherit;
	font-size: .9rem;
	color: var(--ink);
}

.ltbar__sort select:focus-visible {
	outline: 2px solid var(--gold-deep);
	outline-offset: 1px;
}

/* Pills take the full second row so removing one never reflows the sort
   control out from under the pointer. */
.ltbar__pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 1 0 100%;
}

.ltbar__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 13px;
	border-radius: 100px;
	border: 1px solid var(--forest);
	background: var(--forest);
	color: #fff;
	font-size: .86rem;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}

.ltbar__pill:hover,
.ltbar__pill:focus-visible {
	background: var(--forest-deep);
	border-color: var(--forest-deep);
	color: #fff;
}

.ltbar__x {
	font-size: 1.05rem;
	line-height: 1;
	opacity: .75;
}

.ltbar__clear {
	font-size: .86rem;
	color: var(--ink-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ltbar__clear:hover { color: var(--ink); }

@media (max-width: 640px) {
	.ltbar__sort { margin-left: 0; flex: 1 0 100%; }
	.ltbar__sort select { flex: 1 1 auto; }
}

/* =========================================================================
   3. Review breakdown
   ========================================================================= */

.rbreak {
	display: grid;
	grid-template-columns: minmax(180px, 230px) 1fr;
	gap: 30px;
	align-items: center;
	margin: 0 0 34px;
	padding: 24px 26px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}

.rbreak__score {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-right: 26px;
	border-right: 1px solid var(--line);
}

.rbreak__num {
	font-family: var(--font-display);
	font-size: 3rem;
	line-height: 1;
	color: var(--forest);
}

.rbreak__word {
	font-weight: 700;
	color: var(--gold-deep);
}

.rbreak__count {
	font-size: .84rem;
	color: var(--ink-soft);
}

.rbreak__bars {
	display: grid;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rbreak__row {
	display: grid;
	grid-template-columns: 62px 1fr 34px;
	align-items: center;
	gap: 12px;
	font-size: .84rem;
	color: var(--ink-soft);
}

.rbreak__track {
	height: 8px;
	border-radius: 100px;
	background: var(--paper-2);
	overflow: hidden;
}

.rbreak__fill {
	display: block;
	height: 100%;
	border-radius: 100px;
	background: var(--gold);
}

.rbreak__n {
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

@media (max-width: 640px) {
	.rbreak {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 20px;
	}
	.rbreak__score {
		padding: 0 0 16px;
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}
}

/* =========================================================================
   4. Card badges
   ========================================================================= */

/* In the card body, above the eyebrow — style.css keeps the photo well free
   of overlays on purpose, and this respects that. */
.cbadges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 8px;
	padding-right: 96px; /* clears the share + wishlist buttons */
}

.cbadge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 100px;
	font-size: .71rem;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.4;
	white-space: nowrap;
}

.cbadge--gold {
	background: var(--gold);
	color: var(--ink-ongold, #241a06);
}

.cbadge--forest {
	background: var(--forest);
	color: #fff;
}

.cbadge--paper {
	background: var(--paper-2);
	color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--line);
}

/* =========================================================================
   Motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.psub__link,
	.ltbar__pill,
	.ltbar__sort select {
		transition: none;
	}
	html { scroll-behavior: auto; }
}