/*
Theme Name: VT Theme
Theme URI: 
Author: Local Fame
Author URI: 
Description: 
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 7.2
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vt-theme
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * Shared hover easing. Every interactive element eases the same three
 * properties over the same duration, so cards, buttons, chips and nav
 * links cannot drift apart again.
 */

:root {
	--vt-hover: background .2s ease, color .2s ease, border-color .2s ease;
}

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */

:root :where(.is-layout-flow) > * {
    margin-block-start: 0;
    margin-block-end: 0;
}

/* Focus styles */

:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */

.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */

.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */

.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */

h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/

/*
 * Prevents unnecessary scrollbars while handling long lines of preformatted text.
 * https://core.trac.wordpress.org/ticket/63875
 */

:where(pre) {
	overflow-x: auto;
}

/* ==========================================================================
   Site header
   Three stacked bars: ticker, utility bar, masthead.
   Colours and faces come from theme.json presets - no hard-coded hex here.
   ========================================================================== */

.vt-header {
	--vt-gutter: clamp(20px, 3vw, 40px);
	position: relative;
	z-index: 60;
}

/* --- Fixed header --------------------------------------------------------
   The header stays on screen. Being fixed it no longer takes up space, so
   the content is pushed down by its height: scripts-top.js measures the
   header into --vt-header-h (232px is the desktop height, for before the
   script runs). The padding always uses the full height, ticker included,
   so hiding the ticker on scroll moves nothing on the page.

   No transform on the header: the mobile menu is position: fixed inside it,
   and a transformed parent would trap that full-screen overlay in the
   header's box. z-index 100 keeps the open menu above the help widget (95).
   ------------------------------------------------------------------------- */

header.wp-block-template-part {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 100;
}

.wp-site-blocks {
	padding-top: var(--vt-header-h, 232px);
}

/* In-page links (#kits, #faq...) stop below the header, not under it. By
   then the ticker has gone, so its height is left out. */

html {
	scroll-padding-top: calc(var(--vt-header-h, 232px) - var(--vt-ticker-h, 46px));
}

/* --- Bar 1: ticker -------------------------------------------------------- */

.vt-ticker {
	height: 46px;
	background: var(--wp--preset--color--brand);
	display: flex;
	align-items: center;
	overflow: hidden!important;
	position: relative;
	transition: height .3s ease, opacity .2s ease;
}

/* Hidden once the page is scrolled 100px (scripts-top.js). */

header.is-scrolled .vt-ticker {
	height: 0;
	opacity: 0;
}

/* The strip is two copies of the items (scripts-top.js) and slides left by
   half its own width, so it must keep its full content width: max-content
   and no shrinking, or older engines squeeze it into the bar and -50% is
   half the bar instead of one copy. Prefixed for older Safari / iOS and
   Android WebKit; translate3d keeps it on the GPU there. */

.vt-ticker__viewport {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
	gap: 56px;
	white-space: nowrap;
	padding-left: 56px;
	will-change: transform;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-animation: vt-marquee 38s linear infinite;
	animation: vt-marquee 38s linear infinite;
}

.vt-ticker__group {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
	gap: 56px;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	margin: 0;
	overflow: hidden!important;
}

.vt-ticker__item {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .22em;
	text-transform: uppercase;
	white-space: nowrap;
}

@-webkit-keyframes vt-marquee {
	from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
	to   { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
}

@keyframes vt-marquee {
	from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
	to   { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
}

/* Browsers without flex gap (Safari < 14.1, Chrome < 84) get the spacing
   as a margin after each item instead - scripts-top.js adds the class.
   The trailing margin also spaces the two copies, so the strip loses its
   left padding to keep each copy exactly half the width. */

.vt-no-flexgap .vt-ticker__viewport {
	padding-left: 0;
}

.vt-no-flexgap .vt-ticker__item {
	margin-right: 56px;
}

/* --- Bar 2: utility ------------------------------------------------------- */

.vt-utility {
	min-height: 52px;
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--surface-raised);
	padding: 0 var(--vt-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	margin-block-start: 0;
}

.vt-utility__search {
	width: 300px;
	max-width: 34vw;
	flex: 0 1 auto;
}

.vt-utility__search .wp-block-search__inside-wrapper {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--surface-high);
	border-radius: 0;
	padding: 0 0 5px;
	gap: 10px;
	align-items: center;
	background-color:transparent;
}

.vt-utility__search .wp-block-search__input {
	background: transparent;
	border: 0;
	outline: none;
	padding: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--barlow);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	padding:4px;
}

.vt-utility__search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--muted);
}

.vt-utility__meta {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
}

.vt-utility__hours {
	margin: 0;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.vt-utility__phone {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0;
}

.vt-utility__phone a {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	text-decoration: none;
}

.vt-utility__phone-label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.vt-utility__phone-label img {
	width: 19px;
	height: 19px;
	flex-shrink: 0;
}

.vt-utility__phone-number {
	font-family: var(--wp--preset--font-family--anton);
	font-size: 28px;
	line-height: 1;
	letter-spacing: .01em;
	white-space: nowrap;
	color: var(--wp--preset--color--contrast);
	transition: var(--vt-hover);
}

.vt-utility__phone-number:hover {color:#E01021;}

/* --- Bar 3: masthead ------------------------------------------------------ */

.vt-masthead {
	min-height: 132px;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--surface-high);
	display: flex;
	align-items: center;
	padding: 12px var(--vt-gutter);
	gap: 28px;
	position: sticky;
	top: 0;
	z-index: 60;
}

.vt-masthead__brand {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-shrink: 0;
}

.vt-masthead__brand .wp-block-site-logo img {
	width: 108px;
	height: 108px;
	object-fit: contain;
}

.vt-masthead__brand .wp-block-site-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--anton);
	font-size: 40px;
	line-height: .92;
	letter-spacing: .01em;
	text-transform: uppercase;
	white-space: nowrap;
}

.vt-masthead__brand .wp-block-site-title a {
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.vt-masthead__brand .wp-block-site-tagline {
	margin: 0;
	font-family: var(--wp--preset--font-family--anton);
	font-size: 20px;
	line-height: 1;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

/* Navigation */

.vt-masthead__nav.wp-block-navigation {
	flex: 1 1 auto;
	min-width: 0;
	margin-left: auto;
}

.vt-masthead__nav.wp-block-navigation .wp-block-navigation__container {
	gap: 12px 15px;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}

.vt-masthead__nav.wp-block-navigation .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	padding-bottom: 3px;
	padding-top: 3px;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-light);
	border-bottom: 3px solid transparent;
	text-decoration: none;
	transition: var(--vt-hover);
}

.vt-masthead__nav.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.vt-masthead__nav.wp-block-navigation .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
	border-bottom-color: var(--wp--preset--color--brand);
}

/* Submenus */
.wp-block-navigation .wp-block-navigation__submenu-icon {width:auto;height:auto;}
.wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg {    stroke: white;
    width: 20px;
    height: 20px;}
.wp-site-blocks .vt-masthead__nav.wp-block-navigation .wp-block-navigation__submenu-container {
	left: -18px;
	right:auto;
	min-width: 300px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--surface-high);
	border-top: 3px solid var(--wp--preset--color--brand);
	border-radius: 0;
	padding: 10px 0;
	z-index: 90;
}

.vt-masthead__nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 13px 26px;
	border-bottom: 0;
	font-family: var(--wp--preset--font-family--barlow);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-light);
}

.vt-masthead__nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.vt-masthead__nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--contrast);
}

/* Account + cart */

.vt-masthead__actions {
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin-left: 8px;
	flex-shrink: 0;
}

.vt-icon-button {
	width: 58px;
	height: 58px;
	border: 1px solid var(--wp--preset--color--hairline);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: var(--vt-hover);
}

.vt-icon-button:hover,
.vt-icon-button:focus {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

.vt-cart {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 60px;
	padding: 0 24px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--barlow);
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: var(--vt-hover);
}

.vt-cart:hover,
.vt-cart:focus {
	background: var(--wp--preset--color--contrast);
	color: #000;
}

.vt-cart__count {
	background: #000;
	color: var(--wp--preset--color--contrast);
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
}

/* --- Mobile toggle -------------------------------------------------------- */

.vt-masthead__toggle {
	display: none;
	width: 60px;
	height: 60px;
	border: 1px solid var(--wp--preset--color--hairline);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	align-items: center;
	justify-content: center;
}

/* Search icon sits left of the field, as in the design. */

.vt-utility__search .wp-block-search__button {
	background: transparent;
	border: 0;
	padding: 0;
	min-width: 0;
	color: var(--wp--preset--color--muted);
	order: -1;
}

/* Site title stacked over tagline. */

.vt-masthead__brand-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ==========================================================================
   Hero carousel
   Autoplay cross-fades; manual changes slide horizontally, as in the design.
   Slide state is driven by .is-active / .is-leaving on .vt-hero__slide, and
   .is-manual / .is-forward / .is-back on the section. scripts-top.js builds
   the dots and counter from the authored slides.
   ========================================================================== */

.vt-hero {
	/* One-off rule colour from the design; not worth a palette slot. */
	--vt-hero-rule: #4A4C50;

	position: relative;
	min-height: 800px;
	height: 80vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	touch-action: pan-y;
	outline: none;
}

/* --- Slide layers --------------------------------------------------------- */

.vt-hero__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity .7s ease;
}
.vt-chero h1 {max-width:60%;}
/* Media */

.vt-hero__media {
	position: absolute;
	inset: 0;
	margin: 0;
	overflow: hidden;

	/* Solid behind a parked image, so a slide is never see-through. */
	background: var(--wp--preset--color--base);
}

/*
 * Before scripts-top.js marks the hero ready, show the first slide. Without
 * this the carousel is a black box for anyone with JavaScript disabled, since
 * .is-active is only ever added by script.
 */

.vt-hero__slide.is-active,
.vt-hero:not(.is-ready) .vt-hero__slide:first-child {
	opacity: 1;
	pointer-events: auto;
	z-index: 2;
}

.vt-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 66% 50%;
}

.vt-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #050505 4%, rgba(5, 5, 5, .86) 44%, rgba(5, 5, 5, .15) 100%);
}

/* Copy */

.vt-hero__copy {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	padding: 50px 0;
	display: flex;
	flex-direction: column;
	gap: 34px;
}

/* --- Manual (swipe / dots / arrows) transitions --------------------------- */

.vt-hero.is-manual .vt-hero__media {
	transition: opacity .8s ease, transform 1.1s cubic-bezier(.22, .61, .24, 1);
}

.vt-hero.is-manual .vt-hero__copy {
	transition: opacity .55s ease, transform .8s cubic-bezier(.22, .61, .24, 1);
}

.vt-hero.is-manual .vt-hero__slide.is-active .vt-hero__media,
.vt-hero.is-manual .vt-hero__slide.is-active .vt-hero__copy {
	transform: translateX(0);
}

/* Slides waiting off-stage are parked without animating. */

.vt-hero.is-manual .vt-hero__slide:not(.is-active):not(.is-leaving) .vt-hero__media,
.vt-hero.is-manual .vt-hero__slide:not(.is-active):not(.is-leaving) .vt-hero__copy {
	transition: none;
}

.vt-hero.is-manual.is-back .vt-hero__slide.is-leaving .vt-hero__media,
.vt-hero.is-manual.is-back .vt-hero__slide.is-leaving .vt-hero__copy,
.vt-hero.is-manual.is-forward .vt-hero__slide:not(.is-active):not(.is-leaving) .vt-hero__media,
.vt-hero.is-manual.is-forward .vt-hero__slide:not(.is-active):not(.is-leaving) .vt-hero__copy {
	transform: translateX(7%);
}

.vt-hero.is-manual.is-forward .vt-hero__slide.is-leaving .vt-hero__media,
.vt-hero.is-manual.is-forward .vt-hero__slide.is-leaving .vt-hero__copy,
.vt-hero.is-manual.is-back .vt-hero__slide:not(.is-active):not(.is-leaving) .vt-hero__media,
.vt-hero.is-manual.is-back .vt-hero__slide:not(.is-active):not(.is-leaving) .vt-hero__copy {
	transform: translateX(-7%);
}

/* --- Chips ---------------------------------------------------------------- */

.vt-hero__chips {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.vt-hero__badge,
.vt-hero__tag {
	margin: 0;
	padding: 10px 14px;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.vt-hero__badge {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--contrast);
}

.vt-hero__tag {
	border: 1px solid var(--vt-hero-rule);
	color: var(--wp--preset--color--contrast);
}

/* --- Headline and standfirst ---------------------------------------------- */

.vt-hero .vt-hero__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--anton);
	font-size: var(--wp--preset--font-size--hero);
	font-weight: 400;
	line-height: .95;
	letter-spacing: -.015em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

.vt-hero__sub {
	margin: 0;
	max-width: 46ch;
	font-family: var(--wp--preset--font-family--barlow);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--muted-light);
}

/* --- Calls to action ------------------------------------------------------ */

.vt-hero__actions {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.vt-hero__actions .wp-block-button .wp-block-button__link {
	display: flex;
	align-items: center;
	gap: 18px;
	height: 78px;
	padding: 0 34px;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--anton);
	font-size: 26px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
	transition: var(--vt-hover);
}

.vt-hero__actions .wp-block-button .wp-block-button__link:hover,
.vt-hero__actions .wp-block-button .wp-block-button__link:focus {
	background: var(--wp--preset--color--contrast);
	color: #000;
	border-color: var(--wp--preset--color--contrast);
}

.vt-hero__actions .is-style-outline .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--contrast);
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

/* Arrow on the solid CTA, so the button label stays clean in the editor. */

.vt-hero__actions .wp-block-button:not(.is-style-outline) .wp-block-button__link::after {
	content: "\2192";
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
}

/* --- Dots and counter (built by scripts-top.js) --------------------------- */

.vt-hero__controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	pointer-events: none;
}

.vt-hero__controls-inner {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	padding: 0 var(--vt-hero-gutter, clamp(20px, 3vw, 56px)) 48px;
	display: flex;
	align-items: center;
	gap: 14px;
	pointer-events: auto;
}

.vt-hero__dot {
	width: 20px;
	height: 5px;
	padding: 0;
	border: 0;
	cursor: pointer;
	background: var(--vt-hero-rule);
	transition: width .3s ease, background .3s ease;
}

.vt-hero__dot.is-active {
	width: 48px;
	background: var(--wp--preset--color--brand);
}

.vt-hero__counter {
	margin: 0;
	padding-left: 10px;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-dark);
}

/* --- Narrow screens ------------------------------------------------------- */

/* ==========================================================================
   Product order section
   The #order section of the product page design. Shopify renders the card
   from a <template>, so <shopify-list-context> is laid out with
   display: contents and the frames themselves become the flex items.
   scripts-bot.js drives the gallery, the stepper and the description toggle.
   ========================================================================== */

.product-layout {
	max-width: 1680px;
	margin: 0 auto;
	padding: 0 56px 110px;
}

.product-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 12px 0 18px;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-dark);
}

.product-breadcrumb a {
	color: inherit;
	text-decoration: none;
	transition: var(--vt-hover);
}

.product-card {
	--vt-affirm: #4A6CF7;
}

.product-card__container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	gap: 48px;
}

/* --- Gallery -------------------------------------------------------------- */

.product-card__media {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.product-card__image-slider {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--surface-high);
}

.product-card__image-grid {
	display: flex;
	align-items: stretch;
	transition: transform .5s cubic-bezier(.2, .8, .25, 1);
	will-change: transform;
}

.product-card__image-grid shopify-list-context,
.product-card__images shopify-list-context {
	display: contents;
}

.product-card__image-grid shopify-media {
	display: block;
	flex: 0 0 100%;
	width: 100%;
	height: var(--vt-frame-height, 640px);
	overflow: hidden;
}

.product-card__image-grid shopify-media img,
.product-card__image-grid img {
	display: block;
	width: 100%;
	height: var(--vt-frame-height, 640px);
	object-fit: cover;
}

/* 3D render (ACF 3d_render), the first frame when set. Shown whole rather
   than cropped - the renders are portrait - on the video's own black. */

.product-card__frame {
	flex: 0 0 100%;
	width: 100%;
	height: var(--vt-frame-height, 640px);
	overflow: hidden;
	background: #000;
}

.product-card__frame video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.product-card__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: rgba(5, 5, 5, .6);
	border: 1px solid var(--wp--preset--color--surface-high);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: var(--vt-hover);
}

.product-card__nav--prev { left: 14px; }

.product-card__nav--next { right: 14px; }

.product-card__nav:hover,
.product-card__nav:focus {
	background: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--contrast);
}

.product-card__media-label {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 10px 14px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.product-card__images {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 12px;
}

.product-card__image {
	padding: 0;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--surface-high);
	opacity: .62;
	cursor: pointer;
	transition: opacity .2s ease, border-color .2s ease;
}

.product-card__image:hover { opacity: 1; }

.product-card__image.is-active {
	opacity: 1;
	border-width: 2px;
	border-color: var(--wp--preset--color--brand);
}

.product-card__image img,
.product-card__image video {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* The render's thumbnail carries a play mark so it reads as video. */

.product-card__image--video {
	position: relative;
}

.product-card__image--video::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	margin: -9px 0 0 -6px;
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent var(--wp--preset--color--contrast);
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
	pointer-events: none;
}

/* --- Dyno comparison ------------------------------------------------------ */

.product-card__dyno {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	margin-top: 4px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--surface-high);
}

.product-card__dyno-cell {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	padding: 22px 26px;
}

.product-card__dyno-label {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.product-card__dyno-figure {
	font-family: var(--wp--preset--font-family--anton);
	font-size: 34px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-light);
}

.product-card__dyno-cell.is-boosted .product-card__dyno-label {
	color: var(--wp--preset--color--accent);
}

.product-card__dyno-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 22px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--anton);
	font-size: 32px;
	line-height: 1;
}

/* --- Details -------------------------------------------------------------- */

.product-card__details {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.product-card__info {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.product-card .product-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--anton);
	font-size: clamp(54px, 4.4vw, 82px);
	font-weight: 400;
	line-height: .93;
	letter-spacing: -.018em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

.product-card__brand {
	font-family: var(--wp--preset--font-family--barlow);
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.product-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}

.product-card__rating {
	display: flex;
	align-items: center;
	gap: 10px;
}

.product-card__stars {
	display: flex;
	gap: 2px;
	color: var(--wp--preset--color--contrast);
}

.product-card__nav svg,
.product-card__stars svg {
	fill: currentColor;
}

.product-card__score {
	font-family: var(--wp--preset--font-family--barlow);
	font-size: 17px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .04em;
}

.product-card__reviews {
	font-family: var(--wp--preset--font-family--barlow);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .04em;
	color: var(--wp--preset--color--muted-light);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	transition: var(--vt-hover);
}

.product-card__reviews:hover,
.product-card__reviews:focus {
	color: var(--wp--preset--color--contrast);
	border-bottom-color: var(--wp--preset--color--contrast);
}

.product-card__divider {
	width: 1px;
	height: 20px;
	background: var(--wp--preset--color--surface-high);
}

.product-card__installs {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.product-card__installs::before {
	content: "";
	flex-shrink: 0;
	width: 9px;
	height: 9px;
	background: var(--wp--preset--color--brand);
}

/* --- Price ---------------------------------------------------------------- */

.product-card__pricing {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px 0;
	border-top: 1px solid var(--wp--preset--color--surface-high);
	border-bottom: 1px solid var(--wp--preset--color--surface-high);
}

.product-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 22px;
}

.product-card__price-figure {
	display: flex;
	align-items: baseline;
	gap: 14px;
	font-family: var(--wp--preset--font-family--anton);
	font-size: 72px;
	line-height: .88;
	color: var(--wp--preset--color--brand);
}

.product-card__compare-price {
	font-size: 30px;
	color: var(--wp--preset--color--muted);
	text-decoration: line-through;
}

.product-card__shipping {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.product-card__finance {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding: 12px 18px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--surface-high);
	border-left: 3px solid var(--vt-affirm);
}

.product-card__finance-logo {
	height: 21px;
	width: auto;
	object-fit: contain;
}

.product-card__finance-text {
	font-family: var(--wp--preset--font-family--barlow);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
}

.product-card__finance-link {
	margin-left: auto;
	font-family: var(--wp--preset--font-family--barlow);
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--accent);
}

/* --- Variants ------------------------------------------------------------- */

.product-card shopify-variant-selector {
	display: block;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}


.product-card shopify-variant-selector::part(form) {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.product-card shopify-variant-selector::part(label) {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

.product-card shopify-variant-selector::part(label)::before {
	content: "Select a ";
}

.product-card shopify-variant-selector::part(color-swatch) {
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 0;
	cursor: pointer;
	transition: border-color .2s ease;
}

.product-card shopify-variant-selector::part(color-swatch-selected) {
	border: 3px solid var(--wp--preset--color--brand);
}

/* The design labels the group, not each square. Kept reachable rather than
   removed, so the swatch still has an accessible name. */

.product-card shopify-variant-selector::part(color-swatch-label) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Options Shopify does not treat as colours fall back to radios or a select,
   so both are given the same shape rather than left unstyled.

   Each radio is filled with its own colour through --vt-variant-bg. ::part()
   cannot tell one option from another, so scripts-bot.js sets that property
   inside the selector's shadow root with input[value="..."] + label. Selecting
   an option only changes its border, never its fill. */

.product-card shopify-variant-selector::part(radio) {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 132px;
	height: 60px;
	padding: 0 26px;
	background: var(--vt-variant-bg, var(--wp--preset--color--surface));
	border: 4px solid var(--wp--preset--color--surface-high);
	border-radius: 0;
	color: var(--vt-variant-ink, var(--wp--preset--color--contrast));
	font-family: var(--wp--preset--font-family--barlow);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color .2s ease;
}

.product-card shopify-variant-selector::part(radio):hover {
	border-color: var(--wp--preset--color--hairline);
}

.product-card shopify-variant-selector::part(radio-selected),
.product-card shopify-variant-selector::part(radio-selected):hover {
	border-color: var(--wp--preset--color--contrast);
}

.product-card shopify-variant-selector::part(color-swatch-disabled),
.product-card shopify-variant-selector::part(radio-disabled) {
	opacity: .4;
	cursor: default;
}

.product-card shopify-variant-selector::part(select) {
	padding: 12px 14px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--barlow);
	font-size: 14px;
	letter-spacing: .1em;
	text-transform: uppercase;height:59px;margin-top:3px;
}

.single .entry-content h2 {font-size: var(--wp--preset--font-size--display); margin: 20px 0!important;font-weight: 400 !important;
}
.single .entry-content h3 {margin: 15px 0;font-weight: 400 !important;}
.single h1 {    position: absolute;
    z-index: 99;
    background: linear-gradient(180deg, #000000dd 50%, #000000ee 70%, transparent 100%);}
	.wp-block-query-pagination {margin:20px!important;}
	.wp-block-query-pagination > * {padding:10px;}

/* --- Purchase ------------------------------------------------------------- */

.product-card__buttons {
	display: flex;
	align-items: stretch;
	gap: 12px;
}

.product-card__add-to-cart {
	display: flex;
	flex: auto;
	min-width: 0;
	gap: 12px;
}

.product-card__incrementor {
	display: flex;
	flex-shrink: 0;
	height: 78px;
	border: 1px solid var(--wp--preset--color--hairline);
}

.product-card__incrementor button {
	width: 62px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--anton);
	font-size: 30px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: var(--vt-hover);
}

.product-card__incrementor button:hover:not(:disabled) {
	background: var(--wp--preset--color--ink);
}

.product-card__count {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
	border-left: 1px solid var(--wp--preset--color--hairline);
	border-right: 1px solid var(--wp--preset--color--hairline);
}

.product-card__add-button,
.product-card__buy-button {
	height: 78px;
	padding: 0 18px;
	font-family: var(--wp--preset--font-family--anton);
	font-size: 25px;
	line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
	cursor: pointer;
	transition: var(--vt-hover);
}

.product-card__add-button {
	flex: auto;
	min-width: 0;
	background: var(--wp--preset--color--brand);
	border: 0;
	color: var(--wp--preset--color--contrast);
}

.product-card__buy-button {
	flex: 1;
	background: transparent;
	border: 2px solid var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

.product-card__add-button:hover:not(:disabled),
.product-card__buy-button:hover:not(:disabled) {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface);
}

.product-card__incrementor button:disabled,
.product-card__add-button:disabled,
.product-card__buy-button:disabled {
	opacity: .45;
	cursor: default;
}

/* --- Description and trust ------------------------------------------------ */

.product-card__description {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding-top: 26px;
	border-top: 1px solid var(--wp--preset--color--surface-high);
}

.product-card__description-text {
	max-height: 6.4em;
	overflow: hidden;
	margin: 0;
	font-family: var(--wp--preset--font-family--barlow);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--wp--preset--color--muted-light);
}

.product-card__description.is-open .product-card__description-text {
	max-height: none;
	overflow: visible;
}

.more-link,
.product-card__description-text > shopify-data {
	display: block;
}

.product-card__description-text p,
.product-card__description-text h2,
.product-card__description-text h3,
.product-card__description-text h4,
.product-card__description-text ol {
	margin: 0 0 14px;
}

.product-card__description-text > :last-child,
.product-card__description-text shopify-data > :last-child {
	margin-bottom: 0;
}

.product-card__description-text h2,
.product-card__description-text h3,
.product-card__description-text h4 {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

.product-card__description-text strong {
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

.product-card__description-text a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.product-card__description-toggle {
	padding: 0;
	background: transparent;
	border: 0;
	border-bottom: 2px solid var(--wp--preset--color--brand);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--barlow);
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: var(--vt-hover);
}

.vt-masthead__nav.wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.vt-masthead__nav.wp-block-navigation .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content,
.vt-masthead__nav.wp-block-navigation .wp-block-navigation-item.is-open > .wp-block-navigation-item__content,
.product-breadcrumb a:hover,
.product-breadcrumb a:focus,
.product-breadcrumb [aria-current],
.product-card__dyno-cell.is-boosted .product-card__dyno-figure,
.product-card__brand span,
.product-card__description-toggle:hover,
.product-card__description-toggle:focus {
	color: var(--wp--preset--color--contrast);
}

.product-card__trust {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-card__trust li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--wp--preset--font-family--barlow);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.product-card__trust li span {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	background: var(--wp--preset--color--accent);
}

.vt-masthead__close,
.product-card__media-label:empty,
.product-card__compare-price:empty,
.product-card__variant[hidden] {
	display: none;
}

/* --- Narrow screens ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.vt-ticker { transition: none; }

	.vt-ticker__viewport {
		-webkit-animation: none;
		animation: none;
		overflow-x: auto;
	}

	.vt-hero__slide,
	.vt-hero .vt-hero__media,
	.vt-hero .vt-hero__copy {
		transition: none !important;
		transform: none !important;
	}
}

@media (max-width: 1600px) {
	.vt-hero__copy {    padding: 50px 40px;}

	.entry-content > .alignfull > div {padding-left:20px;padding-right:20px;}
}

@media (max-width: 1450px) {
	.product-card__add-to-cart {flex-wrap: wrap;}

	.product-card__add-to-cart > button {flex: 0 0 50%;}
}

@media (max-width: 1200px) {
	.vt-masthead__brand .wp-block-site-logo img { width: 72px; height: 72px; }

	.vt-masthead__brand .wp-block-site-title { font-size: 30px; }

	.vt-masthead__brand .wp-block-site-tagline { font-size: 15px; }

	.vt-utility__phone-number { font-size: 22px; }

	.vt-utility .vt-utility__meta {    flex-direction: column;
    gap: 5px;
    align-items: flex-end;}

	.product-layout { padding: 0 32px 80px; }

	.product-card__container { gap: 32px; }

	.product-card__image-slider { --vt-frame-height: 480px; }

	.product-card__price-figure { font-size: 58px; }

	.product-card__dyno-figure { font-size: 28px; }
}

@media (max-width: 900px) {
	.vt-masthead {
		min-height: 92px;
		flex-wrap: wrap;    justify-content: space-between;    gap: 10px;padding: 10px;
	}
.vt-chero h1 {max-width:100%;}
	.vt-masthead > .vt-masthead__nav.wp-block-navigation {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 200;
		margin: 0;
		padding: 88px 24px 48px;
		background: var(--wp--preset--color--base);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.vt-masthead.is-nav-open .vt-masthead__nav.wp-block-navigation { display: block; }

	.vt-masthead__toggle,
	.vt-masthead.is-nav-open .vt-masthead__close {
		display: flex;
	}

	.vt-masthead__close {
		position: fixed;
		top: 18px;
		right: 18px;
		z-index: 210;
		width: 52px;
		height: 52px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 1px solid var(--wp--preset--color--hairline);
		background: transparent;
		color: var(--wp--preset--color--contrast);
		cursor: pointer;
		transition: var(--vt-hover);
	}

	.vt-masthead__close:hover,
	.vt-masthead__close:focus {
		border-color: var(--wp--preset--color--brand);
		background: var(--wp--preset--color--ink);
	}

	.vt-utility__phone a {align-items: flex-start;    flex-direction: column;gap:5px;}

	.vt-masthead__nav.wp-block-navigation .wp-block-navigation__container {
		justify-content: flex-start;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-bottom: 16px;
	}

	.vt-masthead__nav.wp-block-navigation .wp-block-navigation-item__content {
		padding: 18px 0;
		font-size: 24px;
		border-bottom: 1px solid var(--wp--preset--color--surface-high);
	}

	.vt-masthead__nav.wp-block-navigation .wp-block-navigation__submenu-container {
		position: static;
		margin-top: 0;
		min-width: 0;
		padding: 4px 0 12px 18px;
		border: 0;
		background: transparent;
	}

	.vt-masthead__nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 12px 0;
		font-size: 16px;
		border-bottom: 0;
	}
	.vt-masthead__nav.wp-block-navigation .has-child {flex-wrap: wrap;    align-items: flex-start;}
.vt-masthead__nav.wp-block-navigation .has-child .wp-block-navigation__submenu-container {flex:0 0 100%;border: 1px solid var(--wp--preset--color--surface-high);}
.wp-block-navigation .has-child .has-child .wp-block-navigation__submenu-icon {padding:10px;}
.vt-masthead__nav.wp-block-navigation .has-child .has-child .wp-block-navigation__submenu-container {border:none;padding:0;}
	body.vt-nav-open {
		overflow: hidden;
	}

	.vt-utility.is-relocated {
		display: none;
	}

	.vt-nav-utilities {
		display: flex;
		gap: 10px;
		margin-bottom: 10px;
		padding-bottom: 10px;
		border-bottom: 1px solid var(--wp--preset--color--surface-high);
		flex-direction: row;
    justify-content: space-between;
    align-items: center;
	}

	.vt-nav-utilities .vt-utility__search {
		width: 100%;
		max-width: 300px;
	}

	.vt-utility__search .wp-block-search__inside-wrapper {border-radius:5px;background: black;    padding: 5px;}

	.vt-nav-utilities .vt-utility__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
	}

	.vt-nav-utilities .wp-block-search__input {
		font-size: 16px;
		padding-bottom: 7px;
		color:black;padding-left:40px;
	}
.vt-utility__search .wp-block-search__button {    position: absolute;
    margin: 0 10px;}
	.vt-nav-utilities .vt-utility__phone-number {
		font-size: 30px;
	}

	.vt-utility {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.vt-utility__search {
		width: 100%;
		max-width: 100%;
		order: 3;
	}

	.wp-block-navigation .wp-block-page-list {    flex-direction: column;
    align-items: flex-end;}

	.vt-masthead__brand .wp-block-site-title {    font-size: 24px;}

	.vt-hero {
		min-height: 620px;
		height: auto;
	}

	.vt-hero__copy {
		padding-top: 40px;
		padding-bottom: 96px;
		gap: 24px;
	}

	.vt-hero__media img {
		object-position: 60% 50%;
	}

	.vt-hero__media::after {
		background: linear-gradient(180deg, rgba(5, 5, 5, .55) 0%, rgba(5, 5, 5, .88) 60%, #050505 100%);
	}

	.vt-hero__sub {
		font-size: 18px;
	}

	.vt-hero__actions .wp-block-button .wp-block-button__link {
		height: 62px;
		padding: 0 24px;
		font-size: 20px;
		gap: 12px;
	}

	.product-card__container { grid-template-columns: minmax(0, 1fr); }

	.product-card .product-card__title { font-size: clamp(40px, 8vw, 58px); }

	.product-card__image-slider { --vt-frame-height: 420px; }
}

@media (max-width: 600px) {

	.vt-ticker__viewport, .vt-ticker__group {gap: 15px;}

	/* Padding matches the gap, or the loop jumps by the difference. */
	.vt-ticker__viewport { padding-left: 15px; }

	.vt-no-flexgap .vt-ticker__viewport { padding-left: 0; }

	.vt-no-flexgap .vt-ticker__item { margin-right: 15px; }

	.vt-nav-utilities {        flex-direction: column;
        align-items: flex-end;}

	.vt-utility__phone a {        align-items: flex-end;}

	.vt-icon-button {        width: 40px;
		height: 40px;}

	.vt-cart {height:42px;padding: 0 14px;}

	.vt-masthead__toggle {height:42px;width:42px;}

	.vt-press__logos .wp-block-image {width: calc(50% - 11px);}

	.product-layout { padding: 0 20px 64px; }

	.product-card__image-slider { --vt-frame-height: 320px; height:320px;}
	.product-card__image-slider img {max-height: 320px!important; height:320px!important;}

	.product-card__price-figure { font-size: 48px; }

	.product-card__buttons { flex-wrap: wrap; }

	.product-card__add-to-cart,
	.product-card__buy-button { flex: 1 0 100%; }

	.product-card__dyno-arrow { padding: 8px 22px; }

	.product-card__dyno,
	.product-card__trust,
	.product-card__description-text ul {
		grid-template-columns: minmax(0, 1fr);
	}

	.product-card__finance-link { margin-left: 0; }
}

@media (max-width: 520px) {
	body .vt-masthead__brand-text {display:none;}

	.wp-site-blocks .vt-hero__title {font-size:44px;}
}

@media (max-width: 500px) {
	.product-card__add-to-cart > button {flex: 0 0 100%;}
}