/* Westhill Watch Boxes — front page.
   Hand-written to match the existing design, breakpoint for breakpoint. Loaded only on the
   front page, and only inside the preview gate.

   Every number below was read off the live page with getComputedStyle at 1440x900 and 360x740,
   or out of page 13's own inline Elementor CSS, and not guessed. Where a number looks strange
   it is because the live one is strange, and there is a comment saying so.

   Breakpoints are Elementor's own, from the Default Kit (12246): tablet is (max-width:1024px)
   and mobile is (max-width:767px), mobile last. Note that Elementor's "tablet" rules apply on
   phones too unless a mobile rule overrides them — which is why the Gifts button picks up a
   25px offset at 1024 and keeps it at 360. */

/* ---------------------------------------------------------------------------
   Tokens.

   TYPE. This storefront downloads no webfont at all: Perfmatters' disable_google_fonts is on,
   WP Rocket's host_fonts_locally is off and there is no uploads/elementor/google-fonts
   directory, so Questrial, Manrope and Roboto every one fall through to the browser's generic
   sans-serif. Measured, not assumed — a width probe against a deliberately impossible family
   returned identical widths for all of them. The baseline captures record that fallback, so
   these tokens carry the fallback and nothing else.

   WHEN THE FONTS ARE FIXED (open decision D1) this is a one-line-per-token change:

       --wh-ff-questrial: "Questrial", sans-serif;

   and nothing else in this file has to move.

   COLOUR. Values are the Elementor global kit's own (post 12246), named here by their role
   rather than by Elementor's generated ids.
   --------------------------------------------------------------------------- */

.wh-home {
	--wh-ff-questrial: sans-serif;  /* intended: "Questrial", sans-serif */
	--wh-ff-manrope: sans-serif;    /* intended: "Manrope", sans-serif   */
	--wh-ff-roboto: sans-serif;     /* intended: "Roboto", sans-serif    */
	/* Astra's own body stack, used where Elementor set no family of its own. */
	--wh-ff-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

	--wh-primary: #0a1c2e;      /* kit: Primary       */
	--wh-secondary: #54595f;    /* kit: Secondary     */
	--wh-accent: #ccbb7e;       /* kit: Accent        */
	--wh-white: #fff;           /* kit: 10b519c8      */
	--wh-ink: #000;             /* kit: 1cfbcb3e      */
	--wh-stone: #e9e8e6;        /* kit: 5af3dd5b      */
	--wh-gifts-bg: #e9e3dd;
	--wh-cream: #fbf9ed;
	--wh-navy-tile: #172c42;
	--wh-rust: #ad5207;
}

/* Astra opens #content > .ast-container around whatever get_header() hands over. Page 13 is a
   full-bleed design, so the container is neutralised here as well as by the page-builder
   content layout the template asks Astra for. Scoped to the body class the template adds, so
   nothing else on the site can be touched by it. */
.wh-home-page .ast-container,
.wh-home-page #content .ast-container {
	max-width: none;
	width: auto;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
}
.wh-home-page #content.site-content {
	padding: 0;
}

.wh-home {
	font-family: var(--wh-ff-body);
	color: var(--wh-ink);
}
.wh-home *,
.wh-home *::before,
.wh-home *::after {
	box-sizing: border-box;
}
/* :where() keeps this reset at zero specificity so every layout rule below still wins. Written
   plainly it outranks them and quietly eats the margins — the lesson the Empire rebuild paid
   for once already. */
.wh-home :where(h1, h2, h3, p, ul, li, figure) {
	margin: 0;
	padding: 0;
}
.wh-home :where(ul) {
	list-style: none;
}
.wh-home :where(img, svg) {
	max-width: 100%;
}

/* Section background images. object-fit: cover paints exactly as background-size: cover did,
   but the browser gets to choose the file — which is where the weight goes. */
.wh-cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	display: block;
	z-index: 0;
}

/* ---------------------------------------------------------------------------
   Buttons

   Four shapes, all from the live page's own computed values:
     --navy    filled navy pill, white text, 13px/500, 10px 20px   (both bands, the safes band)
     --white   filled white pill, navy text, same metrics          (bands, right-hand panels)
     --ghost   outlined navy pill, navy text                       (hero, mobile only)
     --square  square rust/cream block, 16px/800, letter-spaced     (the two Gifts tiles)
   --------------------------------------------------------------------------- */

.wh-home a.wh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-family: var(--wh-ff-roboto);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	padding: 10px 20px;
	border: 1px solid transparent;
	border-radius: 50px;
	transition: background-color .3s, color .3s, border-color .3s, transform .3s;
}
.wh-home a.wh-btn--navy {
	background: var(--wh-primary);
	border-color: var(--wh-primary);
	color: var(--wh-white);
}
.wh-home a.wh-btn--navy:hover,
.wh-home a.wh-btn--navy:focus-visible {
	background: transparent;
	color: var(--wh-primary);
	border-color: var(--wh-primary);
}
.wh-home a.wh-btn--white {
	background: var(--wh-white);
	border-color: rgba(10, 28, 46, 0);
	color: var(--wh-primary);
}
.wh-home a.wh-btn--white:hover,
.wh-home a.wh-btn--white:focus-visible {
	background: rgba(255, 255, 255, 0);
	color: var(--wh-white);
	border-color: var(--wh-white);
}
.wh-home a.wh-btn--ghost {
	background: rgba(10, 28, 46, 0);
	border-color: var(--wh-primary);
	color: var(--wh-primary);
}
.wh-home a.wh-btn--ghost:hover,
.wh-home a.wh-btn--ghost:focus-visible {
	background: rgba(2, 1, 1, 0);
	color: var(--wh-primary);
	border-color: var(--wh-primary);
}
/* The hero's desktop button is the only one on the page at Elementor's default size rather
   than "xs": 15px on 12px/24px padding, which is why it measures 41px tall and the band
   buttons measure 35px. */
.wh-home a.wh-btn--lg {
	font-size: 15px;
	padding: 12px 24px;
}
/* Both hero buttons stretch to their container; the band buttons do not. */
.wh-home a.wh-btn--wide {
	display: flex;
	width: 100%;
}
.wh-home a.wh-btn--square {
	border-radius: 0;
	border: 0 solid transparent;
	padding: 12px 24px;
	font-family: var(--wh-ff-manrope);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: capitalize;
}
/* Elementor's "grow" hover animation, reproduced here so e-animation-grow can leave the page.
   The live rule is a 1.1 scale on a .3s transition. */
.wh-home a.wh-btn--square:hover,
.wh-home a.wh-btn--square:focus-visible {
	transform: scale(1.1);
}

/* ---------------------------------------------------------------------------
   1 — hero (live container ca5a307, 1440x500 desktop / 360x433 mobile)

   Live is a two-column flex row whose FIRST column is empty: the copy sits in the right-hand
   column, which then pulls itself 80px past the right edge with a negative margin. The empty
   column is reproduced as a ::before pseudo-element rather than as a div, because it holds
   nothing and announces nothing.
   --------------------------------------------------------------------------- */

.wh-hero {
	position: relative;
	overflow: hidden;
	min-height: 500px;
	padding: 10px;
	display: flex;
	flex-direction: row;
	gap: 20px;
}
.wh-hero::before {
	content: "";
	flex: 1 1 0;
}
.wh-hero__inner {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	/* live container 20e6c7d: margin-right -80px */
	margin-right: -80px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px 0;
}
.wh-home .wh-hero__title {
	font-family: var(--wh-ff-questrial);
	font-size: 60px;
	font-weight: 600;
	line-height: 61px;
	text-align: center;
	color: var(--wh-primary);
}
/* The 28px is the theme's own paragraph margin (1.75em at 16px), which the live text-editor
   widget carries inside its box and which the hero's vertical centring depends on. */
.wh-home .wh-hero__lede {
	margin: 0 0 28px;
	font-family: var(--wh-ff-questrial);
	font-size: 16px;
	font-weight: 400;
	line-height: 14px;
	text-align: center;
	color: var(--wh-ink);
}
.wh-hero__lede--mobile,
.wh-hero__cta--mobile {
	display: none;
}
.wh-home .wh-hero__cta--desktop {
	width: 51%;
	padding: 10px;
	margin: -11px 0 0; /* live container 955ece9 */
}
/* The live button widget carries a -12px top margin (24806d3), which is what makes its
   container 49px tall around a 41px button instead of 61px. Reproduced because the hero's
   vertical centring is computed from that 49. */
.wh-home .wh-hero__cta--desktop .wh-btn {
	margin-top: -12px;
}

/* ---------------------------------------------------------------------------
   2 — desktop trust row (live container 841a920, hidden below 768px)
   --------------------------------------------------------------------------- */

.wh-trust {
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding: 10px;
}
.wh-trust__col {
	width: 33%;
	padding: 10px;
}
.wh-home .wh-trust__img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
   3 — mobile trust carousel (live container d086d9c, hidden above 767px)

   The live widget is a looping Elementor image-carousel on swiper, which is why the live DOM
   holds nine slides for three badges. This is CSS scroll-snap: swipe on touch, drag or
   arrow-key on desktop, three slides for three badges, and no JavaScript at all — which is
   what lets widget-image-carousel leave the page.
   --------------------------------------------------------------------------- */

.wh-trustcar {
	display: none;
	padding: 20px;
}
.wh-trustcar__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.wh-trustcar__track::-webkit-scrollbar {
	display: none;
}
.wh-trustcar__track:focus-visible {
	outline: 2px solid var(--wh-primary);
	outline-offset: 2px;
}
.wh-trustcar__item {
	scroll-snap-align: center;
}
.wh-home .wh-trustcar__img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
   4 and 6 — the two two-up category bands (live containers ac93a6c and bc7c706)

   Four half-width panels, each a photograph with a heading and a SHOP NOW pill. They differ in
   where the copy block sits and how wide it is; the modifiers carry those differences and
   nothing else.
   --------------------------------------------------------------------------- */

.wh-band {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.wh-panel {
	position: relative;
	overflow: hidden;
	width: 50%;
	min-height: 400px;
	display: flex;
	flex-direction: column;
	padding: 40px 20px 20px;
	align-items: center;
}
.wh-panel__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.wh-home .wh-panel__title {
	font-family: var(--wh-ff-questrial);
	font-size: 48px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
}
.wh-panel--dark .wh-panel__title {
	color: var(--wh-primary);
}
.wh-panel--light .wh-panel__title {
	color: var(--wh-white);
}
.wh-home .wh-panel__cta {
	width: 46%;
	display: flex;
	justify-content: center;
}
/* Only the Travel Watch Cases panel has a gap between its heading and its button (live
   container 48e0597, --gap 20px). The other three sit flush. */
.wh-panel--gap .wh-panel__inner {
	gap: 20px;
}
/* Band 2's panels put their copy in an inner column that is narrower than the panel and
   anchored to one side. Live containers 49086f0 / fab8dc5 and 1d32b98 / d620eab. */
.wh-panel--right {
	align-items: flex-end;
	padding: 60px 40px 60px 60px;
}
.wh-panel--right .wh-panel__inner {
	width: 60%;
}
.wh-panel--left {
	align-items: flex-start;
	padding: 60px 0 60px 19px;
}
.wh-panel--left .wh-panel__inner {
	width: 72%;
}

/* ---------------------------------------------------------------------------
   5 — Wiser review carousel (live container 6fef3ca5)

   The heading is ours; everything below it is Wiser's own embed, drawn client-side. The 50%
   width on the embed wrapper is the live shortcode widget's own (--width:50%, max-width:50%,
   dropping to 100% at 1024px).
   --------------------------------------------------------------------------- */

.wh-reviews {
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	gap: 9px;
}
.wh-home .wh-reviews__title {
	padding-top: 26px;
	font-family: var(--wh-ff-questrial);
	font-size: 35px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
	text-align: center;
	color: var(--wh-primary);
}
.wh-reviews__embed {
	width: 50%;
	max-width: 50%;
}

/* ---------------------------------------------------------------------------
   7 — Gifts Under $100 / Under $300 (live container 84261da). No images; pure CSS.
   --------------------------------------------------------------------------- */

.wh-gifts {
	background: var(--wh-gifts-bg);
	padding: 0 72px; /* live: 5% of 1440 */
}
.wh-gifts__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 64.8px 0; /* live: 5% measured against the 1296px content box */
	display: flex;
	flex-direction: row;
	gap: 48px;
}
.wh-gift {
	flex: 1 1 0;
	min-width: 0;
	padding: 120px 60px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.wh-gift--cream {
	background: var(--wh-cream);
	justify-content: center;
}
.wh-gift--navy {
	background: var(--wh-navy-tile);
}
/* line-height 0.5em and a 43.75px tail are both the live values: the eyebrow's own line box is
   half its font size, and the 43.75px is the theme's paragraph margin at 25px (1.75em).
   align-self:center is the live widget's own (_flex_align_self), and it is what makes the box
   shrink to the width of the word rather than to the width of the tile. */
.wh-home .wh-gift__eyebrow {
	align-self: center;
	margin: 0 0 43.75px;
	font-family: var(--wh-ff-manrope);
	font-size: 25px;
	font-weight: 400;
	line-height: .5em;
	text-align: center;
}
.wh-home .wh-gift__title {
	font-family: var(--wh-ff-manrope);
	font-size: 70px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-align: center;
}
.wh-home .wh-gift__cta {
	display: flex;
	justify-content: center;
}
.wh-gift--cream .wh-gift__eyebrow,
.wh-gift--cream .wh-gift__title {
	color: var(--wh-rust);
}
.wh-gift--cream a.wh-btn--square {
	background: var(--wh-rust);
	color: var(--wh-white);
}
.wh-gift--navy .wh-gift__eyebrow,
.wh-gift--navy .wh-gift__title {
	color: var(--wh-cream);
}
.wh-gift--navy a.wh-btn--square {
	background: var(--wh-cream);
	color: var(--wh-rust);
}

/* ---------------------------------------------------------------------------
   8 — Luxury Watch Winder Safes (live container 9bc9dfe)

   Two halves. The photograph carries a gradient scrim; the copy half is a translucent stone
   panel over the same gradient. Both gradients are the live ones, opacity and all.
   --------------------------------------------------------------------------- */

.wh-safes {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	min-height: 640px;
}
.wh-safes__media,
.wh-safes__body {
	position: relative;
	width: 50%;
}
.wh-safes__media::after,
.wh-safes__body::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(180deg, rgba(233, 232, 230, 0) 61%, var(--wh-secondary) 84%);
	pointer-events: none;
}
.wh-safes__media::after {
	opacity: .31;
}
.wh-safes__body::after {
	opacity: .27;
}
.wh-safes__body {
	background: rgba(233, 232, 230, .65);
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.wh-safes__body > * {
	position: relative;
	z-index: 1;
}
.wh-home .wh-safes__title {
	font-family: var(--wh-ff-questrial);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	color: var(--wh-primary);
}
/* Live is an Elementor divider widget: a 10%-wide 1px #000 rule with 5px of padding above and
   below. Reproduced as one element so widget-divider can leave the page. */
.wh-safes__rule {
	display: block;
	width: 100%;
	height: 11px;
	border-top: 1px solid var(--wh-ink);
	background: none;
	/* the rule itself is 10% wide and centred; the 11px box is the widget's 5px+1px+5px */
	border-top-width: 0;
}
.wh-safes__rule::before {
	content: "";
	display: block;
	width: 10%;
	margin: 5px auto;
	border-top: 1px solid var(--wh-ink);
}
/* Live puts the 60px inset on the widget container and leaves the paragraph 580px wide inside
   a 700px box. Same paint, and this way the measured box matches too. */
.wh-home .wh-safes__lede {
	width: calc(100% - 120px);
	margin: 0 auto 24.5px;
	font-family: var(--wh-ff-questrial);
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	color: var(--wh-ink);
}
.wh-home .wh-safes__cta {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* ---------------------------------------------------------------------------
   9 — best sellers (live container c857703, widget ddcb8fb)

   Live is an Essential Addons swiper: eight cards, four visible on desktop, three on tablet,
   two on mobile, 3s autoplay, looping, with prev/next arrows. This is CSS scroll-snap with the
   same card geometry — 316.5px cards on a 10px gutter inside a 1296px track, measured off the
   live page — and no autoplay, which is the pattern already approved on Empire and JB.

   The card metrics look over-precise and they are deliberate: 21.6px is the live title's line
   box and 10.9px is the tail under the price, and together they are what makes a one-line card
   380.6px and a two-line card 402.2px, exactly as live.
   --------------------------------------------------------------------------- */

.wh-best {
	width: 90%;
	margin: 0 auto;
	padding: 20px 0;
	display: flex;
	flex-direction: column;
}
.wh-home .wh-best__title {
	font-family: var(--wh-ff-questrial);
	font-size: 27px;
	font-weight: 400;
	line-height: 1.3;
	text-align: center;
	color: var(--wh-primary);
}
/* The list carries `products` and each item WooCommerce's product classes, because the labels
   plugin and GTM4WP both key off them (see front-page.php). That drags in WooCommerce's own
   `ul.products li.product` float-and-percentage-width layout and whatever Astra layers on top,
   so these rules are written to outrank both rather than to depend on source order. */
.wh-home ul.wh-best__track.products {
	--wh-card-gap: 10px;
	--wh-card-per-view: 4;
	display: flex;
	flex-direction: row;
	gap: var(--wh-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.wh-home ul.wh-best__track.products::-webkit-scrollbar {
	display: none;
}
.wh-home ul.wh-best__track.products::before,
.wh-home ul.wh-best__track.products::after {
	content: none;
}
.wh-home ul.wh-best__track.products:focus-visible {
	outline: 2px solid var(--wh-primary);
	outline-offset: 2px;
}
.wh-home ul.wh-best__track.products > li.wh-card {
	float: none;
	clear: none;
	flex: 0 0 calc((100% - (var(--wh-card-per-view) - 1) * var(--wh-card-gap)) / var(--wh-card-per-view));
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
	background: var(--wh-white);
	text-align: left;
	display: flex;
	flex-direction: column;
}
.wh-card__media {
	position: relative;
}
.wh-card__medialink {
	display: block;
}
.wh-home .wh-card__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.wh-card__body {
	padding: 5px 15px;
}
.wh-home .wh-card__link {
	display: block;
	text-decoration: none;
}
.wh-home .wh-card__title {
	margin: 0;
	font-family: var(--wh-ff-body);
	font-size: 18px;
	font-weight: 500;
	line-height: 21.6px;
	text-align: left;
	color: var(--wh-primary);
}
.wh-home .wh-card__price {
	margin: 0 0 10.9px;
	font-size: 15px;
	font-weight: 400;
	line-height: 21.6px;
	color: var(--wh-primary);
}
.wh-home .wh-card__price .amount,
.wh-home .wh-card__price bdi,
.wh-home .wh-card__price ins,
.wh-home .wh-card__price del {
	color: var(--wh-primary);
}
.wh-home .wh-card__price del {
	opacity: .5;
	margin-right: 8px;
	text-decoration: line-through;
}

/* ---------------------------------------------------------------------------
   Tablet — Elementor's own breakpoint, max-width 1024px
   --------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.wh-hero {
		min-height: 329px;
	}
	.wh-hero__inner {
		justify-content: flex-start;
		align-items: flex-end;
		gap: 14px 0;
		margin-right: 0;
		padding: 20px;
	}
	.wh-home .wh-hero__title {
		font-size: 39px;
		line-height: 1;
		text-align: right;
	}
	.wh-home .wh-hero__lede {
		font-size: 15px;
		text-align: right;
	}
	.wh-hero__lede--desktop {
		display: none;
	}
	.wh-home .wh-hero__cta--desktop {
		width: 39%;
	}

	.wh-reviews {
		gap: 37px;
		flex-wrap: wrap;
	}
	.wh-home .wh-reviews__title {
		padding-top: 18px;
	}
	.wh-reviews__embed {
		width: 100%;
		max-width: 100%;
	}

	.wh-gift {
		padding: 80px 40px;
	}
	/* _element_width_tablet / _mobile are both "inherit" on the live eyebrow, which undoes the
	   shrink-to-fit it has on desktop. Same centred word either way; matched so the measured
	   boxes agree too. */
	.wh-home .wh-gift__eyebrow {
		align-self: stretch;
	}
	/* Elementor stores this offset on the tablet breakpoint only, which in Elementor means
	   "1024px and below" — so it applies on phones as well. Reproduced, not tidied. */
	.wh-home .wh-gift__cta {
		margin-top: 25px;
	}

	.wh-home ul.wh-best__track.products {
		--wh-card-per-view: 3;
	}

	/* Elementor's align_tablet:justify on all four band buttons — they stop being pill-shaped
	   labels and fill their container from 1024px down. */
	.wh-home .wh-panel__cta .wh-btn {
		display: flex;
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
   Mobile — Elementor's own breakpoint, max-width 767px
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.wh-hero {
		min-height: 433px;
		flex-direction: column-reverse;
		justify-content: flex-end;
	}
	.wh-hero::before {
		content: none;
	}
	.wh-hero__inner {
		align-items: center;
		justify-content: flex-start;
		gap: 5px 2px;
		padding: 5px 10px 10px;
	}
	.wh-home .wh-hero__title {
		font-size: 30px;
		line-height: 1.1;
		text-align: center;
	}
	.wh-home .wh-hero__lede {
		text-align: center;
		line-height: 1px;
	}
	.wh-hero__lede--mobile {
		display: block;
		padding-top: 5px;
	}
	.wh-hero__cta--desktop {
		display: none;
	}
	.wh-home .wh-hero__cta--mobile {
		display: block;
		width: 67%;
		margin: -20px 0 0;
		padding-top: 5px;
	}
	/* The hero photograph is not centred on mobile: live sets background-position:-215px 0 on a
	   cover-scaled 1126x433 rendering of the 3000x1154 file. The horizontal overflow is
	   1126-360 = 766px, so -215px is 215/766 = 28% of the overflow, and cover leaves no vertical
	   overflow at all. Without this the phone shows the vase instead of the watch box. */
	.wh-cover--hero {
		object-position: 28% 0%;
	}

	.wh-trust {
		display: none;
	}
	.wh-trustcar {
		display: block;
	}

	.wh-panel,
	.wh-panel--right,
	.wh-panel--left {
		width: 100%;
		min-height: var(--wh-panel-mobile-h, 366px);
		align-items: center;
		padding: 40px 0 0;
	}
	.wh-panel__inner {
		width: 100%;
		gap: 5px;
	}
	/* Band 2's inner column has no gap of its own at any breakpoint; the 5px belongs to the
	   panel on band 1 only. */
	.wh-panel--right .wh-panel__inner,
	.wh-panel--left .wh-panel__inner {
		width: 100%;
		gap: 0;
	}
	.wh-panel--gap .wh-panel__inner {
		gap: 5px;
	}
	/* Band 1's two panels keep 20px of side padding on mobile; band 2's lose it. */
	.wh-band--1 .wh-panel {
		padding: 40px 20px 20px;
	}
	.wh-home .wh-panel__title {
		font-size: 40px;
	}
	.wh-home .wh-panel__cta {
		width: 56%;
	}

	.wh-reviews {
		padding: 54px 18px; /* live: 15% / 5% of 360 */
		gap: 20px;
	}
	.wh-home .wh-reviews__title {
		font-size: 19px;
	}

	.wh-gifts {
		padding: 0 36px; /* live: 10% of 360 */
	}
	.wh-gifts__inner {
		flex-direction: column;
		gap: 35px;
		padding: 43.2px 0; /* live: 15% measured against the 288px content box */
	}
	.wh-gift {
		padding: 50px 30px;
	}
	.wh-home .wh-gift__eyebrow {
		font-size: 18px;
		margin: 0 0 31.5px;
	}
	.wh-home .wh-gift__title {
		font-size: 32px;
	}

	.wh-safes__media,
	.wh-safes__body {
		width: 100%;
	}
	/* 238px, not the 275px the live band measures. The two halves are two flex lines inside a
	   640px minimum, and align-content distributes the 74px of slack equally: 238 + 37 = 275
	   for the photograph and 328 + 37 = 365 for the copy. Setting 275 here would add the slack
	   twice. */
	.wh-safes__media {
		min-height: 238px;
	}

	.wh-best {
		width: 100%;
		padding: 20px;
	}
	.wh-home ul.wh-best__track.products {
		--wh-card-per-view: 2;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wh-home a.wh-btn {
		transition: none;
	}
	.wh-home a.wh-btn:hover,
	.wh-home a.wh-btn:focus-visible {
		transform: none;
	}
	.wh-trustcar__track,
	.wh-home ul.wh-best__track.products {
		scroll-behavior: auto;
	}
}