/**
 * Shared front-end styles for the Barone Watches blocks
 * (barone/featured-watches, barone/watches-grid).
 *
 * Tokens copied from the Barone Watches Design System (same values as
 * pwa/design-tokens.css — kept as a separate copy since these load in a
 * completely different context: the public site vs. the admin PWA).
 * Every selector is prefixed `bwm-` so nothing here can collide with
 * Astra's own classes or another plugin's.
 *
 * The Google Fonts request used to be a CSS @import right here — moved to
 * its own wp_enqueue_style() call (see BWM_Blocks::register_assets()) so
 * the browser fetches it in parallel with this file instead of only
 * starting once this file itself has been downloaded and parsed.
 */

:root {
	--bwm-cream: #f7f1e6;
	--bwm-parchment: #fffbf4;
	--bwm-ink: #1b1815;
	--bwm-mint: #89c3c0;
	--bwm-navy: #3a405a;
	--bwm-navy-hover: #2e3349;
	--bwm-brass: #9c7539;
	--bwm-gold: #c79a5b;
	/* Brand brass (#9c7539) is ~3.7:1 on the cream/parchment grounds —
	   fine for a border or an icon, but below WCAG AA's 4.5:1 for text.
	   This darker variant (~5.7:1) is for text specifically; the original
	   --bwm-brass stays as-is for non-text/decorative uses. */
	--bwm-brass-text: #7c5a2a;

	--bwm-ink-65: rgba(27, 24, 21, 0.65);
	--bwm-ink-55: rgba(27, 24, 21, 0.55);
	--bwm-ink-25: rgba(27, 24, 21, 0.25);
	--bwm-ink-12: rgba(27, 24, 21, 0.12);
	--bwm-ink-10: rgba(27, 24, 21, 0.1);

	--bwm-font-display: "Cormorant Garamond", Garamond, Georgia, serif;
	--bwm-font-ui: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;

	--bwm-size-display-1: 44px;
	--bwm-size-card-title: 21px;
	--bwm-size-body-sm: 15px;
	--bwm-size-meta: 13px;
	--bwm-size-label: 12px;
	--bwm-size-badge: 11px;
	--bwm-size-nav: 14px;

	--bwm-track-eyebrow: 0.22em;
	--bwm-track-badge: 0.12em;
	--bwm-track-brand: 0.1em;
	--bwm-track-cta: 0.08em;

	--bwm-grid-max: 1200px;
	--bwm-grid-gap: 32px;
	--bwm-carousel-gap: 28px;
	--bwm-card-min: 260px;
	--bwm-card-pad: 22px 24px;

	--bwm-motion-fast: 140ms;
	--bwm-motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.bwm-eyebrow,
.bwm-lede,
.bwm-pagehead,
.bwm-band,
.bwm-grid,
.bwm-wcard,
.bwm-btn,
.bwm-outline,
.bwm-featured,
.bwm-pagination {
	box-sizing: border-box;
}
.bwm-grid *,
.bwm-wcard *,
.bwm-featured * {
	box-sizing: border-box;
}

/* Visually hidden but still announced by screen readers. Same technique
   WordPress core / most themes use for their own .screen-reader-text —
   defined here too so it works even if the active theme doesn't provide it. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* A strong, visible keyboard-focus indicator on every custom interactive
   control here, regardless of any other outline/border that control also
   uses for its own visual state (e.g. .bwm-thumb-active's "selected"
   outline). Without this, several controls below set `outline` for
   non-focus purposes, which silently replaces the browser's default focus
   ring — leaving keyboard users with no visible focus at all. */
.bwm-wcard a:focus-visible,
.bwm-thumb:focus-visible,
.bwm-gallery-arrow:focus-visible,
.bwm-featured-arrow:focus-visible,
.bwm-btn:focus-visible,
.bwm-outline:focus-visible,
.bwm-back:focus-visible,
.bwm-pagination a:focus-visible {
	outline: 2px solid var(--bwm-navy);
	outline-offset: 3px;
}

/* Section header (eyebrow + title + lede) shared by both blocks */
.bwm-pagehead {
	text-align: center;
	padding: 8px 20px 8px;
}

/* Native "Watches for Sale" archive page (templates/archive-watch.php) —
   same top spacing as the homepage's "in evidenza" section (.bwm-featured,
   padding: 44px 0) above its own pagehead, since this page has no other
   element above the pagehead to create that breathing room on its own. */
.bwm-archive-main {
	padding-top: 44px;
}
.bwm-eyebrow {
	font-family: var(--bwm-font-ui);
	font-size: var(--bwm-size-meta);
	letter-spacing: var(--bwm-track-eyebrow);
	text-transform: uppercase;
	color: var(--bwm-brass-text);
	margin: 0 0 14px;
}
.bwm-heading {
	font-family: var(--bwm-font-display);
	font-weight: 500;
	font-size: var(--bwm-size-display-1);
	line-height: 1.3;
	color: var(--bwm-ink);
	margin: 0;
}
.bwm-lede {
	font-family: var(--bwm-font-ui);
	font-size: 16px;
	color: var(--bwm-ink-65);
	max-width: 560px;
	margin: 18px auto 0;
}

/* Watch card, shared by the grid and the featured strip */
.bwm-wcard {
	background: var(--bwm-parchment);
	border: 1px solid var(--bwm-ink-10);
	display: flex;
	flex-direction: column;
	/* No explicit height here: both the grid (.bwm-grid, default
	   align-items: stretch) and the flex strip (.bwm-featured-track,
	   align-items: stretch) already stretch this item to fill their
	   row/cross-axis size on their own. Setting height:100% here used to
	   fight that stretch in the flex strip specifically, leaving shorter
	   cards short instead of matching their taller siblings. */
}
/* The card itself is a plain container (not a link) because it holds two
   separate destinations — the product page and the WhatsApp CTA — and
   HTML doesn't allow an <a> nested inside another <a>. */
.bwm-wshot {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--bwm-ink-10);
}
.bwm-wmodel-link {
	display: block;
	text-decoration: none;
	color: inherit;
}
.bwm-wshot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.bwm-badge {
	position: absolute;
	top: 14px;
	right: 14px;
	font-family: var(--bwm-font-ui);
	font-size: var(--bwm-size-badge);
	letter-spacing: var(--bwm-track-badge);
	text-transform: uppercase;
	padding: 6px 12px;
}
.bwm-badge-available {
	background: var(--bwm-mint);
	color: var(--bwm-ink);
}
.bwm-badge-sold {
	background: rgba(27, 24, 21, 0.85);
	color: var(--bwm-cream);
}
.bwm-wbody {
	padding: var(--bwm-card-pad);
	display: flex;
	flex-direction: column;
	flex: 1;
}
.bwm-wbrand {
	font-family: var(--bwm-font-ui);
	font-weight: 600;
	font-size: var(--bwm-size-body-sm);
	letter-spacing: var(--bwm-track-brand);
	text-transform: uppercase;
	color: var(--bwm-ink);
	margin: 0 0 6px;
}
.bwm-wmodel {
	font-family: var(--bwm-font-display);
	font-weight: 500;
	font-size: var(--bwm-size-card-title);
	line-height: 1.25;
	color: var(--bwm-ink);
	margin: 0 0 8px;
}
.bwm-wmeta {
	font-family: var(--bwm-font-ui);
	font-size: var(--bwm-size-meta);
	color: var(--bwm-ink-65);
	margin: 0 0 18px;
}

/* Buttons */
.bwm-btn {
	display: inline-block;
	font-family: var(--bwm-font-ui);
	background: var(--bwm-navy);
	color: var(--bwm-cream);
	text-transform: uppercase;
	letter-spacing: var(--bwm-track-cta);
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	align-self: flex-start;
	margin-top: auto;
	transition: background var(--bwm-motion-fast) var(--bwm-motion-ease);
}
.bwm-btn:hover,
.bwm-btn:focus {
	background: var(--bwm-navy-hover);
	color: var(--bwm-cream);
}
.bwm-btn-sm {
	font-size: var(--bwm-size-label);
	padding: 11px 20px;
}

/* Card actions row: the WhatsApp CTA plus a secondary "Details" link to the
   product page. The row itself (not the individual buttons) gets
   margin-top: auto now, pinning it to the card base — .bwm-wbody is already
   a flex column (see below), so this still lines up uneven titles the same
   way the lone .bwm-btn used to on its own. */
.bwm-card-actions {
	display: flex;
	gap: 8px;
	align-items: stretch;
	margin-top: auto;
}
.bwm-card-actions .bwm-btn {
	/* Override the standalone positioning (align-self/margin-top) meant for
	   .bwm-btn as a lone flex child of .bwm-wbody — inside this row it's a
	   flex item of .bwm-card-actions instead, and the row handles pinning. */
	align-self: auto;
	margin-top: 0;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bwm-card-details {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	white-space: nowrap;
	font-family: var(--bwm-font-ui);
	font-size: var(--bwm-size-badge);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 11px 14px;
	border: 1px solid var(--bwm-ink-25);
	border-radius: 0;
	text-decoration: none;
	color: var(--bwm-ink);
	background: transparent;
	transition: background var(--bwm-motion-fast) var(--bwm-motion-ease), color var(--bwm-motion-fast) var(--bwm-motion-ease);
}
.bwm-card-details:hover,
.bwm-card-details:focus {
	background: rgba(27, 24, 21, 0.06);
	color: var(--bwm-ink);
}
/* On the grid pages (Watches for Sale / Archive — .bwm-grid) the two
   actions stack full-width instead of sharing a row; the home carousel
   (.bwm-featured-track) keeps the side-by-side layout above. */
.bwm-grid .bwm-card-actions {
	flex-direction: column;
}
.bwm-outline {
	display: inline-block;
	font-family: var(--bwm-font-ui);
	border: 1px solid var(--bwm-ink-25);
	font-size: var(--bwm-size-meta);
	letter-spacing: var(--bwm-track-cta);
	text-transform: uppercase;
	text-decoration: none;
	padding: 15px 30px;
	color: var(--bwm-ink);
	background: transparent;
	transition: background var(--bwm-motion-fast) var(--bwm-motion-ease);
}
.bwm-outline:hover,
.bwm-outline:focus {
	background: var(--bwm-ink-10);
	color: var(--bwm-ink);
}

/* Grid (Watches / Archive pages) */
.bwm-grid {
	max-width: var(--bwm-grid-max);
	margin: 0 auto;
	padding: 20px 20px 8px;
	display: grid;
	/* auto-fill, not auto-fit: with auto-fit, empty tracks collapse and the
	   remaining 1fr track(s) stretch to fill the freed space — great with a
	   full row, but it means a lone card left on the last page (or any
	   under-full row) balloons to the full row width instead of staying the
	   same size as every other card. auto-fill keeps the empty tracks as
	   (invisible) space instead of collapsing them, so every card is always
	   sized the same regardless of how many happen to be in that row. */
	grid-template-columns: repeat(auto-fill, minmax(var(--bwm-card-min), 1fr));
	gap: var(--bwm-grid-gap);
}
.bwm-empty {
	text-align: center;
	color: var(--bwm-ink-65);
	padding: 48px 20px;
	font-family: var(--bwm-font-ui);
}

/* Pagination */
.bwm-pagination {
	display: flex;
	justify-content: center;
	gap: 32px;
	padding: 24px 20px 60px;
	font-family: var(--bwm-font-ui);
	font-size: var(--bwm-size-meta);
	letter-spacing: var(--bwm-track-cta);
	text-transform: uppercase;
}
.bwm-pagination a {
	color: var(--bwm-ink);
	text-decoration: none;
	border-bottom: 2px solid var(--bwm-gold);
	padding-bottom: 2px;
}
.bwm-pagination a:hover {
	color: var(--bwm-brass-text);
}
.bwm-pagination span[aria-disabled] {
	color: var(--bwm-ink-25);
}

/* Featured strip (homepage banner) — mint "feature band", horizontal scroll */
.bwm-featured {
	/* No band background here on purpose — the "Available Now" home
	   carousel in the design sits directly on the page's own cream
	   background, unlike an earlier draft of this block which wrapped it
	   in the DS's mint "feature band" treatment. */
	padding: 44px 0;
	position: relative;
}
.bwm-featured-viewport {
	max-width: var(--bwm-grid-max);
	margin: 0 auto;
	padding: 0 20px;
}
.bwm-featured-track {
	display: flex;
	align-items: stretch;
	gap: var(--bwm-carousel-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 6px;
	-webkit-overflow-scrolling: touch;
}
.bwm-featured-track::-webkit-scrollbar {
	height: 6px;
}
.bwm-featured-track::-webkit-scrollbar-thumb {
	background: var(--bwm-ink-25);
}
.bwm-featured-track .bwm-wcard {
	flex: 0 0 370px;
	scroll-snap-align: start;
}
.bwm-featured-arrows {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 20px;
}
.bwm-featured-arrow {
	/* Reset the theme's own global button style (padding, line-height,
	   appearance) — left unreset, it fights the fixed width/height below
	   and turns this oval instead of a circle. */
	appearance: none;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	line-height: 1;
	flex-shrink: 0;

	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--bwm-ink-25);
	background: var(--bwm-parchment);
	color: var(--bwm-ink);
	font-family: var(--bwm-font-ui);
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--bwm-motion-fast) var(--bwm-motion-ease);
}
.bwm-featured-arrow:hover,
.bwm-featured-arrow:focus {
	background: var(--bwm-cream);
	border-color: var(--bwm-ink-25);
	color: var(--bwm-ink);
}
.bwm-featured-cta {
	text-align: center;
	margin-top: 32px;
}

@media (max-width: 760px) {
	.bwm-heading {
		font-size: 32px;
	}
	.bwm-featured-viewport {
		padding: 0;
	}
	/* The design abandons horizontal scrolling entirely on mobile: the
	   strip becomes a plain vertical stack of full-width cards instead,
	   so the arrows (nothing left to scroll) are hidden too. */
	.bwm-featured-track {
		display: block;
		overflow: visible;
	}
	.bwm-featured-track .bwm-wcard {
		width: 100%;
		flex-basis: auto;
		margin-bottom: 22px;
	}
	.bwm-featured-track .bwm-wcard:last-child {
		margin-bottom: 0;
	}
	.bwm-featured-arrows {
		display: none;
	}
}

/* Product page (single watch) */
.bwm-back {
	max-width: var(--bwm-grid-max);
	margin: 0 auto;
	padding: 24px 20px 0;
	font-family: var(--bwm-font-ui);
	font-size: var(--bwm-size-meta);
	letter-spacing: var(--bwm-track-cta);
	text-transform: uppercase;
	color: var(--bwm-ink-65);
	text-decoration: none;
	display: inline-block;
}
.bwm-back:hover {
	color: var(--bwm-ink);
}
.bwm-product {
	max-width: var(--bwm-grid-max);
	margin: 0 auto;
	padding: 24px 20px 100px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}
/* Photo gallery: a crossfading hero (every photo stacked in the same
   spot, only the active one opaque) plus a separate scrollable thumbnail
   strip below it. See templates/product-gallery.js. */
.bwm-gallery-hero {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--bwm-ink-10);
	touch-action: pan-y;
}
.bwm-gallery-hero-item {
	position: absolute;
	inset: 0;
	opacity: 0;
	z-index: 1;
	pointer-events: none;
	transition: opacity 220ms var(--bwm-motion-ease, ease);
}
.bwm-gallery-hero-active {
	opacity: 1;
	z-index: 2;
	pointer-events: auto;
}
.bwm-gallery-hero-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	cursor: zoom-in;
}
.bwm-gallery-arrow {
	/* Same reset as .bwm-featured-arrow: without it, the theme's own
	   global button padding/line-height turns this oval instead of round. */
	appearance: none;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	line-height: 1;

	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 0;
	background: rgba(247, 241, 230, 0.6);
	color: var(--bwm-ink);
	font-family: var(--bwm-font-ui);
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
}
.bwm-gallery-arrow:hover,
.bwm-gallery-arrow:focus {
	background: rgba(247, 241, 230, 0.6);
	border: 0;
	color: var(--bwm-ink);
}
.bwm-gallery-prev {
	left: 12px;
}
.bwm-gallery-next {
	right: 12px;
}
.bwm-thumb-strip {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	margin-top: 10px;
	margin-bottom: 32px;
	padding-bottom: 6px;
	-webkit-overflow-scrolling: touch;
}
.bwm-thumb-strip::-webkit-scrollbar {
	height: 4px;
}
.bwm-thumb-strip::-webkit-scrollbar-thumb {
	background: var(--bwm-ink-25);
}
.bwm-thumb {
	/* Reset browser default <button> chrome — this is a real button now
	   (not a div) so it's keyboard-focusable and Enter/Space-activatable. */
	appearance: none;
	background: none;
	border: none;
	border-radius: 0; /* Astra's default button style rounds this to 30px otherwise. */
	padding: 0;
	font: inherit;
	display: block;

	flex: 0 0 calc((100% - 30px) / 4);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	position: relative;
	scroll-snap-align: start;
	cursor: pointer;
	opacity: 0.55;
	outline: 1px solid var(--bwm-ink-12);
	outline-offset: -2px;
	transition: opacity 140ms var(--bwm-motion-ease, ease);
}
.bwm-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.bwm-thumb-active {
	opacity: 1;
	outline: 2px solid var(--bwm-ink);
}

/* LIGHTBOX — full-screen zoom/pan viewer for the product gallery. Built
   once per gallery in JS (templates/product-gallery.js), not in this
   template, since it just re-displays images already on the page. */
.bwm-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(27, 24, 21, 0.96);
	display: none;
	align-items: center;
	justify-content: center;
}
.bwm-lightbox-open {
	display: flex;
}
.bwm-lightbox-stage {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: none; /* pinch/pan/double-tap are all handled in JS */
}
.bwm-lightbox-img {
	/* width/height:100% + object-fit:contain (not max-width/max-height
	   alone) so a photo smaller than the viewport still fills it — max-*
	   alone only ever shrinks an oversized image, never enlarges one. */
	width: 100%;
	height: 100%;
	object-fit: contain;
	touch-action: none;
	-webkit-user-drag: none;
	user-select: none;
	cursor: zoom-in;
}
.bwm-lightbox-img.bwm-lightbox-zoomed {
	cursor: zoom-out;
}
.bwm-lightbox-img.bwm-lightbox-panning {
	cursor: grabbing;
}
.bwm-lightbox-close,
.bwm-lightbox-arrow {
	/* Same reset as .bwm-featured-arrow/.bwm-gallery-arrow: without it, the
	   theme's own global button padding/line-height/appearance turns these
	   oval instead of round. */
	appearance: none;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	line-height: 1;
	flex-shrink: 0;

	position: absolute;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	background: rgba(247, 241, 230, 0.15);
	color: var(--bwm-cream);
	font-family: var(--bwm-font-ui);
	font-size: 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--bwm-motion-fast, 140ms) var(--bwm-motion-ease, ease);
}
.bwm-lightbox-close:hover,
.bwm-lightbox-arrow:hover {
	background: rgba(247, 241, 230, 0.3);
}
.bwm-lightbox-close:focus-visible,
.bwm-lightbox-arrow:focus-visible {
	outline: 2px solid var(--bwm-cream);
	outline-offset: 2px;
}
.bwm-lightbox-close {
	top: 20px;
	right: 20px;
	z-index: 2;
}
.bwm-lightbox-prev {
	left: 20px;
}
.bwm-lightbox-next {
	right: 20px;
}
.bwm-lightbox-counter {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--bwm-font-ui);
	font-size: var(--bwm-size-meta);
	letter-spacing: var(--bwm-track-cta, 0.08em);
	color: var(--bwm-cream-55, rgba(247, 241, 230, 0.55));
}
@media (max-width: 760px) {
	.bwm-lightbox-close,
	.bwm-lightbox-arrow {
		width: 38px;
		height: 38px;
	}
	.bwm-lightbox-prev {
		left: 8px;
	}
	.bwm-lightbox-next {
		right: 8px;
	}
}
.bwm-product-badge {
	position: static;
	display: inline-block;
	margin-bottom: 20px;
}
.bwm-product-brand {
	font-family: var(--bwm-font-ui);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: var(--bwm-track-label, 0.14em);
	text-transform: uppercase;
	color: var(--bwm-ink);
	margin: 0 0 10px;
}
.bwm-product-title {
	font-family: var(--bwm-font-display);
	font-weight: 500;
	font-size: 32px;
	line-height: 1.25;
	color: var(--bwm-ink);
	margin: 0 0 22px;
}
.bwm-spec {
	border-top: 1px solid var(--bwm-ink-12);
	margin: 0 0 32px;
}
.bwm-spec-row {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding: 14px 0;
	border-bottom: 1px solid var(--bwm-ink-12);
	font-family: var(--bwm-font-ui);
}
.bwm-spec-row span:first-child {
	font-size: var(--bwm-size-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bwm-ink-65);
}
.bwm-spec-row span:last-child {
	font-size: var(--bwm-size-nav);
	font-weight: 500;
	text-align: right;
}
.bwm-product-desc {
	font-family: var(--bwm-font-ui);
	font-size: var(--bwm-size-body-sm);
	line-height: 1.7;
	color: var(--bwm-ink-65);
	margin: 0 0 32px;
}
.bwm-product-desc p:first-child {
	margin-top: 0;
}
.bwm-product-desc p:last-child {
	margin-bottom: 0;
}
.bwm-product-desc strong,
.bwm-product-desc b {
	font-weight: 700;
}
.bwm-product-desc ul,
.bwm-product-desc ol {
	margin: 0 0 16px;
	padding-left: 22px;
}
.bwm-product .bwm-btn {
	font-size: var(--bwm-size-meta);
	padding: 16px 32px;
	margin-top: 0;
}
.bwm-price-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
	margin-top: 34px;
}
.bwm-price-label {
	font-family: var(--bwm-font-ui);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bwm-ink-65);
	margin-bottom: 0;
}
.bwm-price-value {
	font-family: var(--bwm-font-display);
	font-weight: 600;
	font-size: 34px;
	line-height: 1;
	color: var(--bwm-ink);
}
.bwm-price-value-request {
	font-style: italic;
	font-weight: 500;
	font-size: 24px;
	color: var(--bwm-ink-65);
}
.bwm-sold-notice {
	border-top: 1px solid var(--bwm-ink-12);
	padding: 20px 0 0;
	margin-top: 20px;
	font-family: var(--bwm-font-ui);
	font-size: var(--bwm-size-body-sm);
	color: var(--bwm-ink-65);
}
.bwm-sold-notice a {
	color: var(--bwm-brass-text);
	text-decoration: none;
}
.bwm-sold-notice a:hover {
	color: var(--bwm-ink);
}

@media (max-width: 760px) {
	.bwm-product {
		grid-template-columns: 1fr;
		padding: 20px var(--bwm-gutter-mobile, 20px) 80px;
	}
	.bwm-product-title {
		font-size: 26px;
	}
	.bwm-gallery-prev {
		left: 0;
	}
	.bwm-gallery-next {
		right: 0;
	}
}