/* Vicky’s Face Palace: header, footer, homepage, pages and shop.
   Laid out after thebeautyboxgh.com and set in its type: Abril Fatface for section titles, Dosis
   for the menu, labels, product names and text, heavy Montserrat for the big hero word. Black,
   white and warm greys throughout; rose only for buttons, icons, badges and counts, plus the
   soft rose of the hero's big word. Logo: set in type (.vf-word) until the client sends hers. */

:root {
	--vf-ink: #141414;
	--vf-text: #3E3E3E;
	--vf-muted: #8A8580;
	--vf-bone: #F7F6F4;
	--vf-sand: #EFEDEA;
	--vf-line: #E7E4E0;
	--vf-blush: #F7F6F4;
	--vf-stripe: #E2DED9;
	--vf-berry: #A8436A;
	--vf-berry-deep: #7E3050;
	--vf-tint: #F8ECF1;
	--vf-lilac: #141414;
	--vf-lilac-soft: #D08AA5;
	--vf-plum: #141414;
	--vf-serif: "Abril Fatface", Georgia, "Times New Roman", serif;
	--vf-sans: "Dosis", "Helvetica Neue", Arial, sans-serif;
	--vf-hero: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--vf-gutter: clamp(16px, 3.4vw, 48px);
	--vf-ease: cubic-bezier(.2, .7, .2, 1);
}

/* XStore's "bordered" layout draws a grey frame around the page; the design runs edge to edge. */
body.vfh-on .body-border-left,
body.vfh-on .body-border-top,
body.vfh-on .body-border-right,
body.vfh-on .body-border-bottom { display: none !important; }
body.vfh-on.bordered { border: 0 !important; }

/* The theme's own header and footer are replaced by ours. */
body.vfh-on .header-wrapper,
body.vfh-on .mobile-header-wrapper,
body.vfh-on .sticky-header-wrapper,
body.vfh-on .et-mobile-panel-wrapper,
body.vfh-on .site-header:not(.vfh) { display: none !important; }
body.vff-on .et-footers-wrapper,
body.vff-on footer.prefooter,
body.vff-on .site-footer:not(.vff) { display: none !important; }
body:has(.vf-home) .page-heading,
body:has(.vf-home) .breadcrumb-trail,
body:has(.vf-page) .page-heading,
body:has(.vf-page) .breadcrumb-trail { display: none !important; }

/* Cart, checkout and account pages: XStore adds its widget sidebar beside them. Full width instead. */
body.woocommerce-cart .sidebar,
body.woocommerce-checkout .sidebar,
body.woocommerce-account .sidebar { display: none !important; }
body.woocommerce-cart .content.col-md-9,
body.woocommerce-checkout .content.col-md-9,
body.woocommerce-account .content.col-md-9 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; float: none !important; left: auto !important; right: auto !important; margin-left: 0 !important; }

/* Checkout: the country field stays in the form (set to Ghana) but is not shown, and the address
   line drops "(optional)": it is required for deliveries (checked on submit), only pickups skip it. */
.woocommerce-checkout .vf-hidden-field { display: none !important; }
.woocommerce-checkout #billing_address_1_field .optional { display: none !important; }

/* Our pieces share one small reset so theme styles can't reach them. */
.vf-ui, .vf-ui * { box-sizing: border-box; }
.vf-ui { font-variant-numeric: lining-nums; font-family: var(--vf-sans); font-size: 16px; color: var(--vf-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.vf-ui a, .vf-ui a:hover, .vf-ui a:focus { color: inherit; text-decoration: none; box-shadow: none; }
.vf-ui ul { list-style: none; margin: 0; padding: 0; }
.vf-ui li { margin: 0; padding: 0; font-size: inherit; line-height: inherit; }
.vf-ui li::before { content: none !important; }
.vf-ui h1, .vf-ui h2, .vf-ui h3, .vf-ui p { margin: 0; padding: 0; color: inherit; font-weight: inherit; letter-spacing: normal; text-transform: none; }
.vf-ui button {
	appearance: none; background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 0;
	color: inherit; font: inherit; letter-spacing: inherit; text-transform: none; line-height: 1; min-height: 0; height: auto; width: auto; cursor: pointer;
}
.vf-ui svg { display: block; width: 22px; height: 22px; flex: none; }
.vf-ui img { display: block; max-width: 100%; height: auto; }
.vf-ui a:focus-visible, .vf-ui button:focus-visible, .vf-ui input:focus-visible, .vf-ui select:focus-visible { outline: 2px solid var(--vf-berry); outline-offset: 3px; }
::selection { background: var(--vf-stripe); color: var(--vf-ink); }
/* Screen reader only text and the hidden anti-spam fields. Theme input rules (width: 100%) must not
   reach them: a full width hidden field pushed phones sideways. */
.vf-sr, .vf-ui input.vf-sr { position: absolute !important; width: 1px !important; min-width: 0 !important; max-width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; }

/* Nothing may widen the page on phones. */
body.vfh-on { overflow-x: hidden; }
@supports (overflow: clip) { body.vfh-on { overflow-x: clip; } }

/* The two type voices. */
.vf-ui .vfx-display { font-variant-numeric: lining-nums; font-family: var(--vf-serif); font-weight: 400; letter-spacing: .005em; line-height: 1.12; color: var(--vf-ink); text-wrap: balance; }
.vf-ui .vfx-eyebrow, .vf-ui .vfp-eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--vf-muted); }

/* The wordmark, set in type until a logo file arrives: Vicky’s over a spaced FACE PALACE. */
.vf-word { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; color: inherit; white-space: nowrap; }
.vf-word b { font-family: var(--vf-serif); font-weight: 600; font-size: 1em; letter-spacing: -.01em; line-height: .9; }
.vf-word i { font-family: var(--vf-sans); font-style: normal; font-weight: 600; text-transform: uppercase; color: inherit !important; font-size: .24em; letter-spacing: .42em; margin: 1.15em 0 0 .42em; }
.vf-word-name { flex-direction: row; align-items: baseline; gap: .4em; }
.vf-word-name i { margin: 0; font-size: .34em; letter-spacing: .42em; }
.vf-word-mark b { font-size: 1em; }

/* ---------- Header ---------- */

html.vf-lock, html.vf-lock body { overflow: hidden; }
body.vfh-on { padding-top: var(--vfh-pad, var(--vfh-h, 150px)) !important; }

.vfh-wrap {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 9990;
	transition: transform .35s ease;
}
.vfh-wrap.is-scrolled { transform: translateY(calc(-1 * var(--vfa-h, 0px))); }

/* The notice bar, as on the inspiration: delivery details first, and a cross to close it. */
.vfh-announce { position: relative; background: var(--vf-ink); color: #FFFFFF; text-align: center; padding: 9px 52px; }
.vfh-announce p { font-size: 13px; font-weight: 500; letter-spacing: .04em; line-height: 1.5; }
.vfh-announce a { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .45) !important; }
.vf-ui .vfh-announce-x { position: absolute; top: 50%; right: 10px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-top: -17px; color: #FFFFFF; opacity: .8; }
.vf-ui .vfh-announce-x:hover { opacity: 1; }
.vf-ui .vfh-announce-x svg { width: 16px; height: 16px; }

.vfh { background: #FFFFFF; color: var(--vf-ink); border-bottom: 1px solid transparent; transition: background-color .35s ease, color .35s ease, border-color .35s ease; }

/* One row, as on the inspiration: MENU and Need help? / the logo / search, account and the cart. */
.vfh-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas: "left logo right";
	align-items: center;
	column-gap: 16px;
	max-width: 1600px;
	height: 100px;
	margin: 0 auto;
	padding: 0 var(--vf-gutter);
	transition: height .35s ease;
}
.vfh-wrap.is-scrolled .vfh-bar { height: 76px; }
.vfh-left { grid-area: left; display: flex; align-items: center; gap: 26px; justify-self: start; }
.vfh-right { grid-area: right; display: flex; align-items: center; gap: 4px; justify-self: end; margin-right: -8px; }
.vfh-bar > .vfh-logo { grid-area: logo; justify-self: center; }

.vf-ui .vfh-icon { width: 42px !important; height: 42px !important; min-width: 0; min-height: 0; padding: 0 !important; }
.vfh-icon { position: relative; display: inline-flex !important; align-items: center; justify-content: center; width: 42px; height: 42px; color: inherit; transition: color .2s ease; }
.vf-ui .vfh-icon:hover { color: var(--vf-berry); }
.vf-ui .vfh-icon svg { width: 23px; height: 23px; }
.vfh-count { position: absolute; bottom: 5px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--vf-berry); color: #FFFFFF; font-family: var(--vf-sans); font-size: 11px; font-weight: 600; line-height: 17px; text-align: center; }
.vfh-count:empty { display: none; }

/* MENU: a brand colour square with the lines, joined to a white tab with the word. */
.vf-ui .vfh-menu { display: inline-flex; align-items: stretch; height: 42px; background: #FFFFFF; box-shadow: 0 6px 18px rgba(20, 20, 20, .1); transition: box-shadow .2s ease; }
.vf-ui .vfh-menu:hover { box-shadow: 0 8px 22px rgba(20, 20, 20, .16); }
.vfh-menu-ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; background: var(--vf-berry); color: #FFFFFF; }
.vf-ui .vfh-menu-ico svg { width: 20px; height: 20px; }
.vfh-menu-txt { display: inline-flex; align-items: center; padding: 0 22px; font-family: var(--vf-sans); font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--vf-ink); }

/* "Need help?" and the number, as on the inspiration. */
.vfh-help { display: inline-flex; align-items: center; gap: 12px; color: var(--vf-ink); }
.vf-ui .vfh-help svg { width: 26px; height: 26px; color: var(--vf-ink); }
.vfh-help span { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.vfh-help small { font-family: var(--vf-sans); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--vf-muted); }
.vfh-help b { font-family: var(--vf-sans); font-size: 16px; font-weight: 600; letter-spacing: .08em; }
.vf-ui .vfh-help:hover b { color: var(--vf-berry); }

/* The cart: its total above CART, then the bag with the count. */
.vfh-bag { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; color: var(--vf-ink); }
.vfh-bag-text { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1; }
.vfh-total { font-family: var(--vf-sans); font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--vf-muted); white-space: nowrap; }
.vfh-bag-text b { font-family: var(--vf-sans); font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.vf-ui .vfh-bag:hover b, .vf-ui .vfh-bag:hover .vfh-icon { color: var(--vf-berry); }

/* The logo, black on white. */
.vf-ui .vfh-logo { display: inline-flex; align-items: center; justify-content: center; color: var(--vf-ink); }
.vfh-logo img { max-height: 72px; width: auto; }
.vf-ui .vfh-logo { --vf-logo-2: var(--vf-berry); }
.vf-ui .vfh-logo .vf-logo-wide { width: auto; height: 62px; transition: height .35s ease; }
.vf-ui .vfh-wrap.is-scrolled .vfh-logo .vf-logo-wide { height: 48px; }
.vfh-wrap.is-scrolled .vfh { border-bottom-color: var(--vf-line); }
.vf-ui .vfh-bar .vf-word-lockup { font-size: 44px; transition: font-size .35s ease; }

/* Over a homepage hero: a clear bar with white type, until the page scrolls. */
html.vfh-over .vfh-wrap:not(.is-scrolled) .vfh { background: transparent; color: #FFFFFF; border-bottom-color: rgba(255, 255, 255, .22); }
html.vfh-over .vfh-wrap:not(.is-scrolled) :is(.vfh-logo, .vfh-help, .vfh-bag, .vfh-total, .vfh-help small) { color: #FFFFFF; }
html.vfh-over .vfh-wrap:not(.is-scrolled) .vf-word i { color: #FFFFFF; }


/* Drawer (phones and tablets) */
.vfh-drawer { position: fixed; inset: 0; z-index: 9995; background: rgba(20, 20, 20, 0); transition: background-color .3s ease; }
.vfh-drawer.is-open { background: rgba(20, 20, 20, .45); }
.vfh-drawer[hidden], .vfh-search[hidden] { display: none !important; }
.vfh-panel {
	position: absolute; top: 0; bottom: 0; left: 0; width: min(88vw, 400px); overflow-y: auto;
	display: flex; flex-direction: column; background: #FFFFFF; color: var(--vf-ink);
	padding: calc(8px + var(--wp-admin--admin-bar--height, 0px)) 0 calc(24px + env(safe-area-inset-bottom));
	transform: translateX(-100%); transition: transform .34s var(--vf-ease);
}
.vfh-drawer.is-open .vfh-panel { transform: none; }
.vfh-panel:focus { outline: none; }
.vfh-panel-top { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 10px 0 22px; border-bottom: 1px solid var(--vf-line); }
.vf-ui .vfh-panel-top .vf-word { font-size: 26px; }
.vf-ui .vfh-panel-top .vf-logo { width: auto; height: 44px; }
.vfh-panel-nav { display: flex; flex-direction: column; padding: 10px 0; }
.vfh-panel-nav > a, .vfh-panel-group summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; font-family: var(--vf-serif); font-size: 24px; line-height: 1.15; color: var(--vf-ink); cursor: pointer; list-style: none; transition: color .2s ease; }
.vfh-panel-group summary::-webkit-details-marker { display: none; }
.vfh-panel-nav > a:hover, .vfh-panel-group summary:hover { color: var(--vf-berry); }
.vf-ui .vfh-panel-nav svg { width: 18px; height: 18px; color: var(--vf-berry); transition: transform .2s ease; }
.vfh-panel-group[open] summary svg { transform: rotate(180deg); }
.vfh-panel-group a { display: block; padding: 9px 22px 9px 38px; font-size: 15px; color: var(--vf-text); }
.vfh-panel-group[open] { padding-bottom: 8px; background: var(--vf-bone); }
.vf-ui .vfh-panel-nav .is-sale { color: var(--vf-berry); }
.vfh-panel-help { display: flex; flex-direction: column; margin: 6px 22px 0; padding-top: 16px; border-top: 1px solid var(--vf-line); }
.vfh-panel-help a { padding: 8px 0; font-size: 14px; color: var(--vf-text); }
.vfh-panel-foot { margin-top: auto; padding: 22px 22px 0; display: flex; flex-direction: column; gap: 14px; }
.vfh-panel-foot > a { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--vf-ink); }
.vf-ui .vfh-panel-foot > a svg { width: 18px; height: 18px; color: var(--vf-berry); }
.vfh-panel-social { display: flex; gap: 8px; margin-top: 6px; }
.vfh-panel-social a { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--vf-stripe); border-radius: 50%; color: var(--vf-berry); }
.vf-ui .vfh-panel-social svg { width: 17px; height: 17px; }

/* Search */
.vfh-search { position: fixed; inset: 0; z-index: 9996; background: rgba(20, 20, 20, 0); transition: background-color .25s ease; }
.vfh-search.is-open { background: rgba(20, 20, 20, .38); }
.vfh-search-box { background: #FFFFFF; padding: calc(28px + var(--wp-admin--admin-bar--height, 0px)) var(--vf-gutter) 34px; transform: translateY(-100%); transition: transform .3s ease; }
.vfh-search.is-open .vfh-search-box { transform: none; }
.vfh-search form { max-width: 760px; margin: 0 auto; }
.vfh-search-label { display: block; margin-bottom: 12px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--vf-muted); }
.vfh-search-row { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--vf-berry); color: var(--vf-ink); }
.vfh-search-row > svg { color: var(--vf-berry); }
.vf-ui .vfh-search-row input[type="search"] {
	flex: 1; min-width: 0; height: 58px; margin: 0; padding: 0; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important;
	font-family: var(--vf-serif); font-size: 28px; color: var(--vf-ink); outline: none;
}

/* "Shopping in Accra": the branch switch beside Need help? (the pin alone on smaller screens). */
.vf-ui .vfh-branch { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--vf-line); border-radius: 19px; font-family: var(--vf-sans); font-size: 14px; color: var(--vf-text); white-space: nowrap; transition: border-color .2s ease; }
.vf-ui .vfh-branch:hover { border-color: var(--vf-berry); }
.vf-ui .vfh-branch svg { width: 17px; height: 17px; color: var(--vf-berry); }
.vf-ui .vfh-branch svg:last-child { width: 14px; height: 14px; color: var(--vf-muted); }
.vfh-branch b { font-weight: 700; color: var(--vf-ink); }
.vfh-branch-m { display: none !important; }
.vf-ui .vfh-branch-m svg { color: var(--vf-berry); }
.vf-ui .vfh-panel-foot .vfh-branch { align-self: flex-start; margin-bottom: 4px; }

/* The branch popup: one small frosted glass card over the blurred page, two buttons. */
.vfb { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20, 20, 20, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: background-color .35s ease, backdrop-filter .35s ease, -webkit-backdrop-filter .35s ease; }
.vfb[hidden] { display: none !important; }
.vfb.is-open { background: rgba(20, 20, 20, .28); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); }
.vfb-box:focus { outline: none; }
.vfb-box { position: relative; width: min(400px, 100%); padding: 34px 28px 28px; border: 1px solid rgba(255, 255, 255, .75); border-radius: 28px; background: rgba(255, 255, 255, .58); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); box-shadow: 0 30px 80px rgba(20, 20, 20, .22), inset 0 1px 0 rgba(255, 255, 255, .9); text-align: center; opacity: 0; transform: scale(.86) translateY(14px); }
.vfb.is-open .vfb-box { animation: vfbPop .55s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes vfbPop { to { opacity: 1; transform: none; } }
.vf-ui .vfb-close { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .6); color: var(--vf-ink); }
.vf-ui .vfb-close svg { width: 18px; height: 18px; }
.vfb-logo { display: inline-flex; color: var(--vf-ink); }
.vf-ui .vfb-logo .vf-logo { width: auto; height: 46px; }
.vf-ui .vfb-title { margin: 14px auto 22px; max-width: 260px; font-family: var(--vf-serif); font-size: 26px; line-height: 1.2; color: var(--vf-ink); text-wrap: balance; }
.vfb-choices { display: grid; gap: 10px; }
.vf-ui .vfb-choice { display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; border: 1px solid rgba(168, 67, 106, .35); border-radius: 27px; background: rgba(255, 255, 255, .7); color: var(--vf-ink); font-size: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.vf-ui .vfb-choice svg { width: 19px; height: 19px; color: var(--vf-berry); transition: color .2s ease; }
.vf-ui .vfb-choice:hover, .vf-ui .vfb-choice:focus-visible { background: var(--vf-berry); border-color: var(--vf-berry); color: #FFFFFF; transform: translateY(-2px); }
.vf-ui .vfb-choice:hover svg, .vf-ui .vfb-choice:focus-visible svg { color: #FFFFFF; }
.vf-ui .vfb-choice.is-on { background: var(--vf-berry); border-color: var(--vf-berry); color: #FFFFFF; }
.vf-ui .vfb-choice.is-on svg { color: #FFFFFF; }

/* Product page: not at this branch. */
.vf-ui.vf-branch-note { margin: 18px 0; padding: 16px 18px; background: var(--vf-tint); border-left: 3px solid var(--vf-berry); }
.vf-ui.vf-branch-note p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: var(--vf-ink); }
.vf-ui.vf-branch-note p:last-child { margin-bottom: 0; }

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

.vf-ui .vfx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 32px; border: 1px solid transparent; font-family: var(--vf-sans); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.vf-ui .vfx-btn svg { width: 18px; height: 18px; }
.vf-ui .vfx-btn-dark { background: var(--vf-berry); border-color: var(--vf-berry); color: #FFFFFF !important; }
.vf-ui .vfx-btn-dark:hover { background: var(--vf-berry-deep); border-color: var(--vf-berry-deep); }
.vf-ui .vfx-btn-light { background: #FFFFFF; border-color: #FFFFFF; color: var(--vf-ink) !important; }
.vf-ui .vfx-btn-light:hover { background: var(--vf-berry); border-color: var(--vf-berry); color: #FFFFFF !important; }
.vf-ui .vfx-btn-ghost { border-color: rgba(255, 255, 255, .8); color: #FFFFFF !important; }
.vf-ui .vfx-btn-ghost:hover { background: #FFFFFF; color: var(--vf-ink) !important; }
.vf-ui .vfx-btn-line { border-color: var(--vf-berry); color: var(--vf-berry) !important; }
.vf-ui .vfx-btn-line:hover { background: var(--vf-berry); color: #FFFFFF !important; }
.vfx-btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Homepage ---------- */

.vf-home { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; background: #FFFFFF; }
html:has(.vf-home) { overflow-x: clip; }

.vfx-media, .vfx-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.vfx-media img { object-fit: cover; object-position: 50% 40%; max-width: none; }
/* Photos fill their whole box. Elementor (".elementor img { height: auto }") and theme rules would
   otherwise leave a photo at its natural height with empty space below. */
.vf-ui .vfx-media { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; }
.vf-ui .vfx-media img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; object-fit: cover !important; }

/* Hero. Without a photo it is a soft wash, so the page still opens well. */
.vfx-hero { position: relative; display: flex; align-items: center; min-height: clamp(480px, calc(88svh - var(--vfh-h, 150px)), 760px); background: linear-gradient(150deg, #8A8178 0%, #4A443E 60%, #1E1C1A 100%); color: #FFFFFF; overflow: hidden; }
.vfx-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 20, 20, .5) 0%, rgba(20, 20, 20, .14) 45%, rgba(20, 20, 20, 0) 65%); pointer-events: none; }
.vfx-hero.is-empty::after { background: none; }
.vfx-hero.is-empty::before { content: ""; position: absolute; right: 8%; top: 50%; width: min(42vw, 560px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 0 0 40px rgba(255, 255, 255, .04), 0 0 0 90px rgba(255, 255, 255, .03); transform: translateY(-50%); }
.vfx-hero-text { position: relative; z-index: 2; width: 100%; max-width: 1600px; margin: 0 auto; padding: 72px var(--vf-gutter); }
.vf-ui .vfx-hero .vfx-eyebrow { margin-bottom: 18px; color: rgba(255, 255, 255, .85); }
.vf-ui .vfx-hero h1 { max-width: 660px; font-size: clamp(40px, 5vw, 76px); line-height: 1.04; color: #FFFFFF; }
.vf-ui .vfx-hero .vfx-sub { max-width: 460px; margin: 20px 0 34px; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .92); }
/* A hero photo from the media library sets the hero's shape, so the whole photo shows, between
   480px and 900px tall. */
.vfx-hero.has-size { min-height: 0; height: clamp(480px, calc(100vw * var(--vfx-h) / var(--vfx-w)), 900px); }

/* The big word hero, as on thebeautyboxgh.com: the photo on white standing behind a huge word that
   runs edge to edge (assets/hero.js sizes it), small words floating around, a dark wedge in the
   corner, the small line in spaced capitals over the word on the left and a black SHOP NOW! box
   on the right. As the page opens the letters rise one by one, the photo floats up, the small line
   draws together and the box slides in; on scroll the layers move apart (hero.js). The big word
   and the floating words are the one place the brand colour shows large. */
.vfx-hero.is-word { display: block; min-height: 0; height: clamp(440px, 41vw, 680px); background: #FFFFFF; color: var(--vf-ink); overflow: hidden; }
.vfx-hero.is-word::before, .vfx-hero.is-word::after { content: none; }
.vfx-hero-wedge { position: absolute; left: 0; bottom: 0; z-index: 1; width: 36%; height: 13%; background: #26251E; clip-path: polygon(0 0, 100% 72%, 100% 100%, 0 100%); }
.vfx-hero-photos { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* The photos take turns: each fades in and rises a little (assets/hero.js moves is-on along). */
.vfx-hero-photos .vfx-hero-photo { opacity: 0; translate: 0 26px; transition: opacity 1.1s ease, translate 1.4s var(--vf-ease); }
.vfx-hero-photos .vfx-hero-photo.is-on { opacity: 1; translate: 0 0; }
.vf-ui .vfx-hero-photo { position: absolute; left: 50%; bottom: 0; z-index: 1; height: 100%; width: auto; max-width: 70vw; aspect-ratio: var(--vfx-ratio, 1); margin: 0; transform: translateX(-50%); }
.vf-ui .vfx-hero-photo img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; object-fit: contain !important; object-position: 50% 100% !important; mix-blend-mode: multiply; }
/* Soft sides and top, so a photo whose background is not quite white still melts into the page. */
.vfx-hero-photo { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 5%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 5%); mask-composite: intersect; }
.vf-ui .vfx-hero .vfx-bigword { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; max-width: none; margin: 0; font-family: var(--vf-hero); font-size: 18.5vw; font-weight: 800; line-height: .72; letter-spacing: -.02em; text-align: center; text-transform: uppercase; color: var(--vf-lilac-soft); white-space: nowrap; pointer-events: none; }
.vfx-bigword-in { display: inline-block; padding-top: .04em; }
.vfx-bigword-in > span { display: inline-block; }
.vf-ui .vfx-hero-kicker { position: absolute; left: 9%; bottom: 13%; z-index: 3; max-width: 7em; font-family: var(--vf-hero); font-size: clamp(18px, 2.6vw, 42px); font-weight: 600; line-height: 1.3; letter-spacing: .5em; text-transform: uppercase; color: #000000; }
.vf-ui .vfx-hero-shop { position: absolute; right: 11.5%; bottom: 11%; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 32px 14px; background: #000000; color: var(--vf-lilac-soft) !important; font-family: var(--vf-hero); line-height: 1; text-transform: uppercase; }
.vf-ui .vfx-hero-shop:hover { background: #1C1C1C; }
.vfx-hero-shop small { font-size: clamp(12px, 1.2vw, 18px); font-weight: 500; letter-spacing: .3em; }
.vfx-hero-shop b { font-size: clamp(22px, 2.6vw, 40px); font-weight: 700; letter-spacing: .08em; }
.vfx-float { position: absolute; z-index: 0; font-family: var(--vf-hero); font-size: clamp(18px, 2.7vw, 42px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vf-lilac-soft); white-space: nowrap; }
.vfx-float > span { display: inline-block; }
.vfx-float-1 { top: 11%; left: 1.3%; }
.vfx-float-2 { top: 24%; left: 11.5%; font-size: clamp(16px, 2.2vw, 34px); filter: blur(1.6px); }
.vfx-float-3 { top: 1.5%; right: 1%; font-size: clamp(13px, 1.3vw, 20px); letter-spacing: .16em; }
.vfx-float-4 { top: 2%; left: 1.3%; color: #CFCAC4; font-size: clamp(16px, 2vw, 30px); }
.vf-ui .vfx-hero.is-word.is-empty .vfx-hero-kicker { bottom: auto; top: 30%; }
.vf-ui .vfx-hero.is-word.is-empty .vfx-hero-shop { bottom: auto; top: 30%; }
.vfx-hero.is-word.is-empty .vfx-float-2 { display: none; }

/* Hero video, in place of the photos: in the photo frame behind the word (soft faded sides like
   the photos), or across the whole hero, where the small words turn white to stay readable. */
.vf-ui .vfx-hero-photos .vfx-hero-video { position: absolute; left: 50%; bottom: 0; width: min(56vw, 860px); height: 100%; max-width: none; margin: 0; object-fit: cover; transform: translateX(-50%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 5%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 5%); mask-composite: intersect; }
.vf-ui .vfx-hero.has-video-full .vfx-hero-photos .vfx-hero-video { left: 0; width: 100%; transform: none; -webkit-mask-image: none; mask-image: none; }
.vfx-hero.has-video-full .vfx-hero-photos::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, .08) 55%, rgba(0, 0, 0, .15) 100%); }
.vf-ui .vfx-hero.has-video-full .vfx-hero-kicker { color: #FFFFFF; text-shadow: 0 2px 16px rgba(0, 0, 0, .35); }
.vfx-hero.has-video-full .vfx-float { z-index: 2; color: rgba(255, 255, 255, .9); text-shadow: 0 2px 12px rgba(0, 0, 0, .3); }
.vfx-hero.has-video-full .vfx-hero-wedge { z-index: 2; }
.vf-ui .vfx-media .vfx-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* Opening: each part plays in once hero.js marks the hero ready (fonts loaded, word sized). */
@keyframes vfLetterUp { from { opacity: 0; transform: translateY(55%); } to { opacity: 1; transform: none; } }
@keyframes vfPhotoUp { from { opacity: 0; transform: translateY(48px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes vfKicker { from { opacity: 0; letter-spacing: 1.1em; } to { opacity: 1; letter-spacing: .5em; } }
@keyframes vfShopIn { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes vfFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes vfWedge { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes vfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes vfShow { to { opacity: 1; } }
.vfx-hero.is-word.is-ready .vfx-bigword-in > span { animation: vfLetterUp .9s calc(.15s + var(--i) * .08s) var(--vf-ease) both; }
.vfx-hero.is-word.is-ready .vfx-hero-photos { animation: vfPhotoUp 1.2s .1s var(--vf-ease) both; }
.vfx-hero.is-word.is-ready .vfx-hero-kicker { animation: vfKicker 1.3s .7s var(--vf-ease) both; }
.vfx-hero.is-word.is-ready .vfx-hero-shop { animation: vfShopIn 1s .9s var(--vf-ease) both; }
.vfx-hero.is-word.is-ready .vfx-hero-wedge { animation: vfWedge 1.1s .3s var(--vf-ease) both; }
.vfx-hero.is-word.is-ready .vfx-float { animation: vfFadeIn 1.2s calc(1s + var(--f, 0) * .2s) ease both; }
.vfx-hero.is-word.is-ready .vfx-float > span { animation: vfFloat 7s calc(var(--f, 0) * -1.7s) ease-in-out infinite; }
.vfx-float-2 { --f: 1; }
.vfx-float-3 { --f: 2; }
.vfx-float-4 { --f: 3; }
/* Until hero.js runs, the parts wait unseen; if it never does, they show after three seconds. */
.vf-anim .vfx-hero.is-word:not(.is-ready) > :not(.vfx-bigword), .vf-anim .vfx-hero.is-word:not(.is-ready) .vfx-bigword-in { opacity: 0; animation: vfShow 0s 3s forwards; }

/* Section heads: a centred serif title, as on the inspiration; arrows to the right. */
.vfx-head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 1600px; margin: 0 auto 34px; padding: 0 var(--vf-gutter); text-align: center; }
.vf-ui .vfx-title { font-family: var(--vf-serif); font-weight: 400; font-size: clamp(30px, 3vw, 46px); line-height: 1.12; letter-spacing: .01em; color: var(--vf-ink); text-wrap: balance; }
.vfx-head-link { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--vf-ink); border-bottom: 1px solid var(--vf-berry); padding-bottom: 3px; transition: color .2s ease; }
.vf-ui .vfx-head-link:hover { color: var(--vf-berry); }
.vfx-head .vfx-arrows { position: absolute; right: var(--vf-gutter); bottom: 0; }

/* Category tiles: the photo with a dark fade, the item count and the name in serif capitals. */
.vfx-cats { padding: clamp(48px, 6vw, 88px) 0 clamp(16px, 2vw, 24px); }
.vfx-cat-grid {
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 16px) / 5); gap: 16px;
	max-width: 1600px; margin: 0 auto; padding: 0 var(--vf-gutter) 4px;
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--vf-gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.vfx-cat-grid::-webkit-scrollbar { display: none; }
.vfx-cat { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; color: #FFFFFF; scroll-snap-align: start; background: linear-gradient(150deg, #CFC8BF 0%, #8C847A 60%, #3B3732 100%); }
.vfx-cat:nth-child(3n+2) { background: linear-gradient(150deg, #E2DCD4 0%, #A39A8F 55%, #4E4943 100%); }
.vfx-cat:nth-child(3n+3) { background: linear-gradient(150deg, #BDB5AB 0%, #77706A 55%, #2C2926 100%); }
.vf-ui .vfx-cat, .vf-ui .vfx-feature-media { color: #FFFFFF; }
.vf-ui .vfx-cats.is-brands .vfx-cat { color: var(--vf-ink); }
.vfx-cat-img { position: absolute; inset: 0; display: block; }
.vf-ui .vfx-cat-img img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; object-fit: cover !important; transition: transform 1s var(--vf-ease); }
.vfx-cat:hover .vfx-cat-img img { transform: scale(1.05); }
.vfx-cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 20, 20, .72) 0%, rgba(20, 20, 20, .18) 50%, rgba(20, 20, 20, 0) 75%); pointer-events: none; }
.vfx-cat-text { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 1; display: flex; flex-direction: column; gap: 6px; }
.vfx-cat-count { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.vfx-cat-name { font-family: var(--vf-sans); font-size: clamp(20px, 1.7vw, 27px); font-weight: 700; line-height: 1.05; letter-spacing: .01em; text-transform: uppercase; }
.vfx-cats .vfx-progress { margin-top: 26px; }
.vfx-cats.no-scroll .vfx-progress, .vfx-cats.no-scroll .vfx-arrows { display: none; }

/* Brands: white tiles with the house's name set large, unless a logo photo is given. */
.vfx-cats.is-brands { background: var(--vf-bone); padding-bottom: clamp(48px, 6vw, 88px); margin-top: clamp(24px, 3vw, 48px); }
.vfx-cats.is-brands .vfx-cat-grid { grid-auto-columns: calc((100% - 3 * 16px) / 4); }
.vfx-cats.is-brands .vfx-cat { aspect-ratio: 16 / 9; background: #FFFFFF; color: var(--vf-ink); border: 1px solid var(--vf-line); transition: border-color .25s ease, box-shadow .25s ease; }
.vfx-cats.is-brands .vfx-cat:hover { border-color: var(--vf-ink); box-shadow: 0 14px 30px rgba(20, 20, 20, .08); }
.vfx-cats.is-brands .vfx-cat::after { content: none; }
.vf-ui .vfx-cats.is-brands .vfx-cat-img img { object-fit: contain !important; padding: 12% 16%; }
.vfx-cats.is-brands .vfx-cat-text { inset: 0; align-items: center; justify-content: center; text-align: center; }
.vfx-cats.is-brands .vfx-cat:not(.is-empty) .vfx-cat-text { inset: auto 0 12px; }
.vfx-cats.is-brands .vfx-cat:not(.is-empty) .vfx-cat-name { display: none; }
.vfx-cats.is-brands .vfx-cat-name { order: -1; font-family: var(--vf-serif); font-size: clamp(22px, 2vw, 32px); font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--vf-ink); }
.vfx-cats.is-brands .vfx-cat-count { color: var(--vf-muted); }

/* Brands we stock: one slim row, the heading on the left and the black logos gliding past on the
   right, faded at both ends; they pause under the pointer and darken when pointed at. */
.vfx-brands { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px); max-width: 1600px; margin: clamp(24px, 3vw, 40px) auto; padding: 22px var(--vf-gutter); }
.vf-ui .vfx-brands-title { position: relative; padding-right: clamp(24px, 3vw, 48px); font-family: var(--vf-serif); font-size: clamp(22px, 1.9vw, 30px); line-height: 1.1; color: var(--vf-ink); white-space: nowrap; }
.vfx-brands-title::after { content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 46px; margin-top: -23px; background: var(--vf-line); }
.vfx-marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.vfx-marquee-track { display: flex; align-items: center; flex: none; animation: vfMarquee calc(var(--vfx-n, 8) * 3.5s) linear infinite; }
.vfx-marquee:hover .vfx-marquee-track { animation-play-state: paused; }
.vfx-marquee-track li { flex: none; padding: 0 clamp(28px, 3vw, 48px); }
.vfx-brand { display: flex; align-items: center; justify-content: center; height: 52px; opacity: .55; transition: opacity .25s ease, transform .25s ease; }
.vf-ui .vfx-brand:hover { opacity: 1; transform: scale(1.06); }
.vf-ui .vfx-brand-img { width: auto !important; max-width: 170px !important; height: 40px !important; object-fit: contain; }
.vfx-brand-name { font-family: var(--vf-sans); font-size: 17px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--vf-ink); white-space: nowrap; }
@keyframes vfMarquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
	.vfx-marquee { flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; }
	.vfx-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; }
	.vfx-marquee-track[aria-hidden] { display: none; }
}

/* Banners: a photo across the page with the words on top, or ("light") a bright photo with the words on its left. */
.vfx-banner { position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(420px, 40vw, 620px); padding: 56px var(--vf-gutter); text-align: center; color: #FFFFFF; background: linear-gradient(150deg, #4A443E 0%, #141414 100%); overflow: hidden; }
.vfx-banner::after { content: ""; position: absolute; inset: 0; background: rgba(20, 20, 20, .32); }
.vfx-banner.is-empty::after { content: none; }
.vfx-banner-text { position: relative; z-index: 1; max-width: 640px; }
.vf-ui .vfx-banner .vfx-eyebrow { margin-bottom: 16px; color: rgba(255, 255, 255, .85); }
.vf-ui .vfx-banner h2 { font-size: clamp(34px, 4vw, 60px); color: #FFFFFF; }
.vf-ui .vfx-banner .vfx-banner-line { margin: 16px auto 30px; max-width: 480px; font-size: 16px; line-height: 1.65; }
.vfx-banner .vfx-btns { justify-content: center; }
.vf-ui .vfx-banner:not(.vfx-light) .vfx-btn-line { border-color: rgba(255, 255, 255, .8); color: #FFFFFF !important; }
.vf-ui .vfx-banner:not(.vfx-light) .vfx-btn-line:hover { background: #FFFFFF; color: var(--vf-ink) !important; }
/* "light": a bright photo, or without one a soft mist, with dark words on the left */
.vfx-light { justify-content: flex-start; text-align: left; color: var(--vf-text); background: linear-gradient(120deg, var(--vf-blush) 0%, var(--vf-stripe) 100%); }
.vfx-light::after { content: none; }
.vfx-light.is-empty { min-height: 0; padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.vfx-light .vfx-banner-text { max-width: 520px; }
.vfx-light .vfx-btns { justify-content: flex-start; }
.vf-ui .vfx-light .vfx-eyebrow { color: var(--vf-muted); }
.vf-ui .vfx-light h2 { color: var(--vf-ink); }
.vf-ui .vfx-light .vfx-banner-line { margin: 16px 0 30px; color: var(--vf-text); }
.vfx-sale { background: #141414; }
.vfx-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 0; padding: 0; text-align: left; background: var(--vf-plum); }
.vfx-split::after { content: none; }
.vfx-split-media { position: relative; min-height: clamp(480px, 46vw, 760px); overflow: hidden; background: var(--vf-sand); }
.vfx-split .vfx-banner-text { align-self: center; max-width: 560px; padding: clamp(48px, 7vw, 112px); }
.vf-ui .vfx-split .vfx-banner-line { margin: 20px 0 34px; max-width: 440px; font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, .86); }
.vfx-split .vfx-btns { justify-content: flex-start; }
.vf-ui .vfx-split .vfx-btn-dark { background: #FFFFFF; border-color: #FFFFFF; color: var(--vf-berry) !important; }

/* Product rows and cards: a square photo, the brand in small capitals, the name in serif
   capitals, the price and an Add to bag button, as on the inspiration. */
.vfx-new { padding: clamp(48px, 6vw, 88px) 0; }
.vfx-products { display: grid; grid-template-columns: repeat(6, 1fr); gap: 40px 18px; max-width: 1600px; margin: 0 auto; padding: 0 var(--vf-gutter); }
.vfx-card { display: flex; flex-direction: column; color: var(--vf-ink); }
.vfx-card-img { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #FFFFFF; margin-bottom: 16px; }
.vf-ui .vfx-card-img img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; object-fit: cover !important; transition: opacity .45s ease, transform 1s var(--vf-ease); }
.vfx-card-img .vfx-card-alt { opacity: 0; }
.vfx-card:hover .vfx-card-alt { opacity: 1; }
.vfx-card:hover .vfx-card-img img:first-child { transform: scale(1.04); }
.vfx-noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--vf-bone) 0%, var(--vf-sand) 100%); color: var(--vf-stripe); }
.vf-ui .vfx-noimg .vf-word { font-size: 64px; color: var(--vf-stripe); }
.vfx-badge { position: absolute; left: 50%; bottom: 10px; z-index: 1; padding: 8px 18px; background: #FFFFFF; color: var(--vf-ink); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1; white-space: nowrap; box-shadow: 0 4px 14px rgba(20, 20, 20, .1); transform: translateX(-50%); }
.vfx-badge.is-sale { left: 8px; top: 8px; bottom: auto; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; padding: 0; background: var(--vf-lilac-soft); color: #141414; font-size: 13px; font-weight: 600; letter-spacing: 0; box-shadow: none; transform: none; clip-path: polygon(50% 0%, 61% 11%, 75% 6%, 79% 21%, 94% 25%, 89% 39%, 100% 50%, 89% 61%, 94% 75%, 79% 79%, 75% 94%, 61% 89%, 50% 100%, 39% 89%, 25% 94%, 21% 79%, 6% 75%, 11% 61%, 0% 50%, 11% 39%, 6% 25%, 21% 21%, 25% 6%, 39% 11%); }
.vfx-badge.is-low { left: 8px; top: 8px; bottom: auto; padding: 6px 10px; font-size: 11.5px; box-shadow: none; transform: none; background: var(--vf-tint); color: var(--vf-berry-deep); }
.vfx-card-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; }
.vfx-card-cat { margin-bottom: 8px; font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; color: var(--vf-muted); }
.vf-ui .vfx-card-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; font-family: var(--vf-sans); font-size: 15.5px; font-weight: 600; line-height: 1.3; letter-spacing: .03em; text-transform: uppercase; color: var(--vf-ink); transition: color .2s ease; }
.vf-ui .vfx-card-name:hover { color: var(--vf-berry); }
.vf-ui .vfx-card-price { font-size: 15.5px; font-weight: 500; letter-spacing: .03em; color: var(--vf-muted); }
.vfx-card-price del { margin-right: 6px; color: var(--vf-muted); font-weight: 400; }
.vfx-card-price ins { text-decoration: none; color: var(--vf-ink); font-weight: 600; }
.vfx-card-sizes { margin-top: 4px; font-size: 13px; color: var(--vf-muted); }
.vf-ui .vfx-card-add { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; margin-top: auto; padding: 0 14px; border: 1px solid var(--vf-lilac-soft); background: var(--vf-tint); color: var(--vf-ink) !important; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; box-shadow: 2px 2px 0 var(--vf-stripe); transition: background-color .2s ease, color .2s ease; }
.vfx-card-body > .vfx-card-price:last-of-type, .vfx-card-body > .vfx-card-sizes { margin-bottom: 14px; }
.vf-ui .vfx-card-add:hover { background: var(--vf-berry); color: #FFFFFF !important; }
.vf-ui .vfx-card-add.loading { opacity: .6; pointer-events: none; }
.vf-ui .vfx-card-add.added { background: var(--vf-berry); color: #FFFFFF !important; }
/* WooCommerce adds a "View bag" link after a card's Add to bag. */
.vfx-card .added_to_cart { display: block; width: 100%; margin-top: 8px; font-size: 12px; font-weight: 600; text-align: center; color: var(--vf-berry) !important; text-decoration: underline !important; text-underline-offset: 3px; }

/* A tall photo beside six products (Skincare, Makeup...): the title over the products. */
.vfx-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-areas: "media title" "media grid"; grid-template-rows: auto 1fr; gap: 0 clamp(24px, 3vw, 48px); max-width: 1600px; margin: 0 auto; padding: clamp(48px, 6vw, 88px) var(--vf-gutter); }
.vfx-feature.is-right { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "title media" "grid media"; }
.vfx-feature-title { grid-area: title; margin-bottom: 30px !important; text-align: center; }
.vfx-feature-media { grid-area: media; position: relative; display: flex; align-items: flex-end; min-height: 560px; overflow: hidden; background: linear-gradient(160deg, #D8D2CA 0%, #8C847A 50%, #3B3732 100%); color: #FFFFFF; }
.vfx-feature-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 20, 20, .6) 0%, rgba(20, 20, 20, 0) 50%); }
.vfx-feature-media.is-empty::after { background: none; }
.vfx-feature-media .vfx-media img { transition: transform 1.2s var(--vf-ease); }
.vfx-feature-media:hover .vfx-media img { transform: scale(1.03); }
.vfx-feature-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(24px, 3vw, 44px); }
.vfx-feature-media:not(.is-empty) .vfx-feature-text, .vfx-feature-media:not(.is-empty)::after { display: none; }
.vf-ui .vfx-feature-text .vfx-display { display: none; }
.vfx-feature-media.is-empty .vfx-feature-text .vfx-display { display: block; font-size: clamp(32px, 3.2vw, 52px); color: #FFFFFF; }
.vfx-feature-line { max-width: 380px; font-family: var(--vf-serif); font-size: clamp(22px, 2vw, 30px); line-height: 1.25; color: #FFFFFF; }
.vfx-feature-text .vfx-btn { margin-top: 10px; }
.vfx-feature-grid { grid-area: grid; grid-template-columns: repeat(3, 1fr); padding: 0; gap: 32px 16px; }

/* ---------- Footer ---------- */

.vff-wrap { clear: both; }
.vff-perks { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 max(0px, (100% - 1600px) / 2); background: #000000; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.vff-perk { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 30px 24px; text-align: left; }
.vff-perk + .vff-perk { border-left: 1px solid rgba(255, 255, 255, .12); }
.vf-ui .vff-perk svg { width: 28px; height: 28px; color: var(--vf-lilac-soft); }
.vff-perk h3 { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #FFFFFF; line-height: 1.4; }
.vf-ui .vff-perk p { margin-top: 3px; font-size: 15px; color: rgba(255, 255, 255, .72); line-height: 1.5; }

/* Homepage only: a few FAQ questions above the promises. */
.vff-faq { display: grid; grid-template-columns: minmax(260px, 1fr) 1.7fr; gap: clamp(32px, 6vw, 112px); align-items: start; max-width: 1600px; margin: 0 auto; padding: clamp(56px, 7vw, 104px) var(--vf-gutter); }
.vff-faq-intro { position: sticky; top: calc(var(--vfh-h, 150px) - var(--vfa-h, 0px) + 32px); }
.vf-ui .vff-faq-intro .vfx-eyebrow { margin: 0 0 14px; }
.vf-ui .vff-faq-intro .vfx-title { margin: 0; font-size: clamp(30px, 2.8vw, 42px); }
.vf-ui .vff-faq-intro > p:not(.vfx-eyebrow) { max-width: 340px; margin: 16px 0 30px; font-size: 15px; line-height: 1.7; color: var(--vf-text); }
.vff-faq-intro .vfx-title::after { content: ""; display: block; width: 44px; height: 2px; margin-top: 18px; background: var(--vf-berry); }
.vff-faq-links { display: flex; flex-wrap: wrap; gap: 10px; }
.vff-faq-list { border-top: 1px solid var(--vf-line); }
.vff-faq .vfp-q summary { padding: 24px 0; font-size: 17px; transition: color .2s ease; }
.vff-faq .vfp-q summary:hover, .vff-faq .vfp-q[open] summary { color: var(--vf-berry); }
.vff-faq .vfp-q summary span::before, .vff-faq .vfp-q summary span::after { background: var(--vf-berry); }
.vf-ui .vff-faq .vfp-q p { margin-top: -6px; }
@media (max-width: 767px) {
	/* Phones: heading, the questions, then the buttons. */
	.vff-faq { display: flex; flex-direction: column; gap: 0; padding: 56px var(--vf-gutter) 60px; }
	.vff-faq-intro { display: contents; }
	.vf-ui .vff-faq-intro .vfx-title { font-size: 30px; }
	.vf-ui .vff-faq-intro > p:not(.vfx-eyebrow) { margin: 14px 0 26px; }
	.vff-faq-list { width: 100%; }
	.vff-faq-links { order: 1; margin-top: 30px; }
	.vff-faq-links .vfx-btn { flex: 1 1 auto; }
	.vff-faq .vfp-q summary { padding: 19px 0; font-size: 15px; }
}

.vff { position: relative; background: #000000; color: #FFFFFF; overflow: hidden; }

.vff-top { display: grid; grid-template-columns: minmax(260px, 1fr) 3fr; gap: clamp(40px, 5vw, 96px); max-width: 1600px; margin: 0 auto; padding: clamp(56px, 6vw, 88px) var(--vf-gutter) 40px; }
.vf-ui .vff-logo { display: inline-flex; margin-bottom: 26px; color: #FFFFFF; }
.vf-ui .vff-logo .vf-word { font-size: 52px; }
.vf-ui .vff-logo .vf-logo-full { width: auto; height: 150px; }
.vf-ui .vff-logo .vf-logo { width: auto; height: 150px; }
.vf-ui .vff-vip h2 { font-family: var(--vf-serif); font-size: clamp(22px, 1.9vw, 30px); line-height: 1.15; color: #FFFFFF; }
.vf-ui .vff-vip > p { margin: 10px 0 22px; max-width: 360px; font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .75); }
.vff-vip-form { display: flex; max-width: 380px; border-bottom: 1px solid rgba(255, 255, 255, .7); }
.vf-ui .vff-vip-form input[type="email"] {
	flex: 1; min-width: 0; height: 48px; margin: 0; padding: 0 2px; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important;
	font-family: var(--vf-sans); font-size: 15px; color: #FFFFFF !important; outline: none;
}
.vf-ui .vff-vip-form input[type="email"]::placeholder { color: rgba(255, 255, 255, .65); opacity: 1; }
.vf-ui .vff-vip-form button { flex: none; padding: 0 0 0 16px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #FFFFFF; transition: color .2s ease; }
.vf-ui .vff-vip-form button:hover { color: #FFFFFF; }
.vf-ui .vff-vip-msg { margin-top: 12px; font-size: 14px; color: #FFFFFF; }
.vf-ui .vff-vip-msg.is-error { color: #F2B8B8; }

.vff-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 32px; }
.vf-ui .vff-col h3 { margin-bottom: 18px; font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #FFFFFF; }
.vff-col li + li { margin-top: 10px; }
.vff-col a, .vff-col span { font-size: 15.5px; line-height: 1.45; color: rgba(255, 255, 255, .8); transition: color .2s ease; }
.vf-ui .vff-col a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.vff-shop + .vff-shop { margin-top: 22px; }
.vf-ui .vff-shop-name { margin-bottom: 10px; font-size: 16px; font-weight: 700; letter-spacing: .04em; color: #FFFFFF; }
.vf-ui .vff-shop-where { margin: -4px 0 10px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .65); max-width: 240px; }
.vff-shop li + li { margin-top: 6px; }
.vf-ui .vff-hours { margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .65); }
.vff-social { display: flex; gap: 8px; margin-top: 22px; }
.vff-social a { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%; color: #FFFFFF; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.vf-ui .vff-social a:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--vf-plum); }
.vf-ui .vff-social svg { width: 16px; height: 16px; }

/* The Paystack badge: a small white card so the card and mobile money logos read on black. */
.vff-secure { display: flex; justify-content: center; padding: 0 var(--vf-gutter) clamp(24px, 2.5vw, 32px); }
.vf-ui .vff-secure img { display: block; width: 190px; max-width: 100%; height: auto; padding: 4px 6px; border-radius: 10px; background: #FFFFFF; }

.vff-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1600px; margin: 0 auto; padding: 20px calc(var(--vf-gutter) + 190px) calc(20px + env(safe-area-inset-bottom)) var(--vf-gutter); border-top: 1px solid rgba(255, 255, 255, .16); }
body.vff-on #back-top, body.vff-on .back-top { display: none !important; }
.vf-ui .vff-bottom p { font-size: 12px; letter-spacing: .02em; color: rgba(255, 255, 255, .65); }
.vff-top-link { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #FFFFFF !important; }
.vf-ui .vff-top-link svg { width: 16px; height: 16px; }

/* Bottom right: WhatsApp in its own green. */
.vf-float { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 9980; display: flex; align-items: center; pointer-events: none; }
.vf-float > * { pointer-events: auto; }
.vf-ui .vf-wa { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px 0 15px; border-radius: 24px; background: #1A9E4B; color: #FFFFFF !important; font-family: var(--vf-sans); font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .16); transition: background-color .2s ease, transform .2s ease; }
.vf-ui .vf-wa:hover { background: #158A40; transform: translateY(-2px); }
.vf-ui .vf-wa svg { flex: none; width: 24px; height: 24px; }

/* ---------- Site pages ---------- */

.vf-page { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); background: #FFFFFF; }
html:has(.vf-page) { overflow-x: clip; }

.vfp-head { padding: clamp(56px, 8vw, 120px) var(--vf-gutter) clamp(48px, 6vw, 88px); background: var(--vf-blush); text-align: center; }
.vf-ui .vfp-head h1 { margin-top: 16px; font-size: clamp(38px, 4.8vw, 68px); }
.vf-ui .vfp-head .vfp-intro { max-width: 600px; margin: 20px auto 0; font-size: 16px; line-height: 1.7; color: var(--vf-text); }

.vfp-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 112px); align-items: center; max-width: 1360px; margin: 0 auto; padding: clamp(56px, 8vw, 120px) var(--vf-gutter); }
.vfp-split-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--vf-bone); }
.vf-ui .vfp-split-media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.vfp-split-media.is-empty { display: flex; align-items: center; justify-content: center; color: var(--vf-ink); }
.vf-ui .vfp-split-media.is-empty .vf-logo { width: 60%; height: auto; }
.vf-ui .vfp-split-text h2 { margin: 16px 0 24px; font-size: clamp(30px, 3vw, 46px); }
.vf-ui .vfp-split-text p:not(.vfp-eyebrow) { margin-bottom: 18px; font-size: 16px; line-height: 1.8; color: var(--vf-text); }
.vfp-split-text .vfx-btn { margin-top: 12px; }

.vfp-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 56px); max-width: 1360px; margin: 0 auto; padding: 0 var(--vf-gutter) clamp(64px, 8vw, 120px); }
.vfp-values > div { padding-top: 26px; border-top: 1px solid var(--vf-ink); }
.vfp-num { display: block; font-family: var(--vf-serif); font-size: 36px; line-height: 1; color: var(--vf-ink); }
.vfp-values h3 { margin-top: 20px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--vf-ink); }
.vf-ui .vfp-values p { margin-top: 10px; font-size: 15px; line-height: 1.75; color: var(--vf-muted); }

.vfp-cta { padding: clamp(72px, 9vw, 128px) var(--vf-gutter); background: var(--vf-ink); text-align: center; }
.vf-ui .vfp-cta h2 { font-size: clamp(32px, 3.6vw, 54px); color: #FFFFFF; }
.vfp-cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }

.vfp-contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 80px); align-items: start; max-width: 1280px; margin: 0 auto; padding: clamp(56px, 7vw, 104px) var(--vf-gutter); }
.vfp-cards { display: grid; gap: 12px; }
.vfp-card { display: flex; gap: 18px; padding: 22px 24px; border: 1px solid var(--vf-line); background: #FFFFFF; transition: border-color .2s ease; }
a.vfp-card:hover { border-color: var(--vf-ink); }
.vf-ui .vfp-card > svg { width: 22px; height: 22px; color: var(--vf-ink); margin-top: 2px; }
.vfp-card h3 { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--vf-muted); }
.vf-ui .vfp-card .vfp-card-main { margin-top: 6px; font-size: 17px; color: var(--vf-ink); line-height: 1.4; }
.vf-ui .vfp-card .vfp-card-note { margin-top: 4px; font-size: 13px; color: var(--vf-muted); }
.vfp-card-social ul { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.vfp-card-social a { font-size: 16px; color: var(--vf-ink); border-bottom: 1px solid var(--vf-line); }
.vfp-card-social a:hover { border-color: var(--vf-ink); }
.vf-ui .vfp-note { font-size: 15px; line-height: 1.7; color: var(--vf-muted); }

.vfp-form-wrap { padding: clamp(28px, 4vw, 52px); background: var(--vf-bone); }
.vf-ui .vfp-form-wrap h2 { font-size: 30px; margin-bottom: 26px; }
.vfp-form { display: grid; gap: 16px; }
.vfp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vfp-form label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--vf-ink); }
.vfp-form label span { letter-spacing: .02em; text-transform: none; color: var(--vf-muted); font-weight: 400; }
.vf-ui .vfp-form input, .vf-ui .vfp-form textarea {
	display: block; width: 100%; height: 50px; margin: 8px 0 0; padding: 0 14px; border: 1px solid var(--vf-line) !important; border-radius: 0 !important; background: #FFFFFF !important; box-shadow: none !important;
	font-family: var(--vf-sans); font-size: 15px; letter-spacing: normal; text-transform: none; color: var(--vf-ink); outline: none; transition: border-color .2s ease;
}
.vf-ui .vfp-form textarea { height: auto; min-height: 140px; padding: 12px 14px; resize: vertical; }
.vf-ui .vfp-form input:focus, .vf-ui .vfp-form textarea:focus { border-color: var(--vf-ink) !important; }
.vfp-form button { justify-self: start; margin-top: 6px; }
.vf-ui .vfp-msg { padding: 14px 16px; border-left: 2px solid var(--vf-ink); background: #FFFFFF; font-size: 15px; line-height: 1.6; color: var(--vf-ink); }
.vf-ui .vfp-msg.is-error { border-left-color: #A12A2A; margin-bottom: 16px; }
.vf-ui .vfp-aside { margin-top: 22px; font-size: 14px; color: var(--vf-text); }
.vfp-aside a, .vfp-text a { color: var(--vf-ink) !important; text-decoration: underline !important; text-underline-offset: 3px; }

.vfp-faq { display: grid; grid-template-columns: 240px 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; max-width: 1180px; margin: 0 auto; padding: clamp(56px, 7vw, 96px) var(--vf-gutter) clamp(64px, 8vw, 112px); }
.vfp-faq-nav { position: sticky; top: calc(var(--vfh-h, 108px) - var(--vfa-h, 0px) + 28px); display: flex; flex-direction: column; gap: 2px; }
.vfp-faq-nav a { padding: 8px 0; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--vf-muted); transition: color .2s ease; }
.vfp-faq-nav a:hover { color: var(--vf-ink); }
.vfp-faq-list section { margin-bottom: 56px; scroll-margin-top: calc(var(--vfh-h, 108px) + 24px); }
.vf-ui .vfp-faq-list h2 { margin-bottom: 6px; font-family: var(--vf-serif); font-size: 30px; line-height: 1.15; color: var(--vf-ink); }
.vfp-q { border-bottom: 1px solid var(--vf-line); }
.vfp-q summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; cursor: pointer; list-style: none; font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--vf-ink); }
.vfp-q summary::-webkit-details-marker { display: none; }
.vfp-q summary span { position: relative; flex: none; width: 13px; height: 13px; }
.vfp-q summary span::before, .vfp-q summary span::after { content: ""; position: absolute; top: 6px; left: 0; width: 13px; height: 1px; background: var(--vf-ink); transition: transform .25s ease; }
.vfp-q summary span::after { transform: rotate(90deg); }
.vfp-q[open] summary span::after { transform: rotate(0deg); }
.vf-ui .vfp-q p { max-width: 680px; padding: 0 0 22px; font-size: 15px; line-height: 1.8; color: var(--vf-text); }
.vfp-still { padding: 44px 32px; background: var(--vf-bone); text-align: center; }
.vf-ui .vfp-still h3 { font-size: 32px; }
.vf-ui .vfp-still p { margin: 8px 0 24px; font-size: 15px; color: var(--vf-text); }
.vfp-still .vfx-btn { margin: 4px; }

.vfp-text { max-width: 760px; margin: 0 auto; padding: clamp(48px, 6vw, 88px) var(--vf-gutter) clamp(64px, 8vw, 112px); }
.vfp-text section { margin-bottom: 44px; }
.vf-ui .vfp-text h2 { margin-bottom: 14px; font-family: var(--vf-serif); font-size: 28px; font-weight: 400; line-height: 1.2; color: var(--vf-ink); }
.vf-ui .vfp-text p { margin-bottom: 14px; font-size: 15.5px; line-height: 1.85; color: var(--vf-text); }
.vf-ui .vfp-text ul { margin: 0 0 16px; padding-left: 20px; list-style: disc; }
.vf-ui .vfp-text li { margin-bottom: 8px; font-size: 15.5px; line-height: 1.75; color: var(--vf-text); }
.vfp-text li::marker { color: var(--vf-muted); }
.vf-ui .vfp-updated { margin-top: 8px; font-size: 13px; color: var(--vf-muted); }
.vfp-table-wrap { overflow-x: auto; margin-bottom: 14px; border: 1px solid var(--vf-line); -webkit-overflow-scrolling: touch; }
.vf-ui .vfp-table { width: 100%; min-width: 420px; margin: 0; border-collapse: collapse; border: 0; background: #FFFFFF; }
.vf-ui .vfp-table th, .vf-ui .vfp-table td { padding: 13px 16px; border: 0; border-bottom: 1px solid var(--vf-line); text-align: left; font-size: 14px; color: var(--vf-text); background: transparent; }
.vf-ui .vfp-table th { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--vf-ink); background: var(--vf-bone); white-space: nowrap; }
.vf-ui .vfp-table td:first-child { font-weight: 600; color: var(--vf-ink); }
.vf-ui .vfp-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- Shop ---------- */

.vfs-head { padding-bottom: clamp(36px, 4vw, 56px); }
.vfs-cats { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 30px; padding: 20px var(--vf-gutter); border-bottom: 1px solid var(--vf-line); }
.vfs-cats a { position: relative; flex: none; padding: 8px 0; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--vf-muted); transition: color .2s ease; }
.vfs-cats a:hover { color: var(--vf-berry); }
.vf-ui .vfs-cats a.is-sale { color: var(--vf-berry); }
.vf-ui .vfs-cats a.is-on { color: var(--vf-berry); }
.vfs-cats a.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; }
.vfs-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1600px; margin: 0 auto; padding: 22px var(--vf-gutter); }
.vf-ui .vfs-bar p { font-size: 13px; color: var(--vf-muted); }
.vfs-sort { display: flex; align-items: center; gap: 10px; }
.vfs-sort label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--vf-muted); }
.vf-ui .vfs-sort select {
	height: 40px; margin: 0; padding: 0 34px 0 12px; border: 1px solid var(--vf-line) !important; border-radius: 0; box-shadow: none;
	background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.6'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center / 16px;
	appearance: none; -webkit-appearance: none; font-family: var(--vf-sans); font-size: 14px; color: var(--vf-ink); cursor: pointer;
}
.vfs-grid { padding-bottom: 32px; }
.vfs-pages { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 24px var(--vf-gutter) clamp(56px, 7vw, 104px); }
.vfs-pages .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--vf-line); font-size: 14px; color: var(--vf-ink); }
.vf-ui .vfs-pages .current { background: var(--vf-ink); border-color: var(--vf-ink); color: #FFFFFF; }
.vfs-pages .dots { border-color: transparent; }
.vfs-empty { max-width: 520px; margin: 0 auto; padding: 72px var(--vf-gutter) 112px; text-align: center; }
.vf-ui .vfs-empty h2 { font-size: 36px; }
.vf-ui .vfs-empty p { margin: 14px 0 28px; font-size: 15px; line-height: 1.7; color: var(--vf-text); }

/* Product page: size buttons, the delivery note, and the theme's own parts in our type. */
select[data-vf-swatched] { display: none !important; }
.vf-sw-group { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.vf-sw-group .vf-sw { position: relative; display: inline-flex; align-items: center; justify-content: center; transition: border-color .2s ease, background-color .2s ease, color .2s ease, opacity .2s ease; }
.vf-sw-group.is-size .vf-sw { min-width: 52px; height: 44px; padding: 0 14px; border: 1px solid var(--vf-line); font-family: var(--vf-sans); font-size: 14px; color: var(--vf-ink); }
.vf-sw-group.is-size .vf-sw:hover { border-color: var(--vf-berry); }
.vf-ui.vf-sw-group.is-size .vf-sw.is-on { background: var(--vf-berry); border-color: var(--vf-berry); color: #FFFFFF; }
.vf-sw-group.is-size .vf-sw { border-radius: 4px; }
.vf-sw-group .vf-sw.is-off { opacity: .35; }
.vf-sw-group.is-size .vf-sw.is-off::after { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 1px; background: currentColor; transform: rotate(-18deg); }

.vf-ui.vf-pdp-note { margin: 22px 0 6px; padding: 18px 0 0; border-top: 1px solid var(--vf-line); }
.vf-ui.vf-pdp-note li { display: flex; align-items: center; gap: 12px; padding: 5px 0; font-size: 14px; color: var(--vf-text); }
.vf-ui.vf-pdp-note li svg { width: 19px; height: 19px; color: var(--vf-berry); }
.vf-ui.vf-pdp-note a { color: var(--vf-berry); text-decoration: underline; text-underline-offset: 3px; }
.vf-ui.vf-pdp-note .vf-pdp-links { gap: 10px; padding-top: 10px; font-size: 13px; }
.vf-ui.vf-pdp-note .vf-pdp-links span { color: var(--vf-line); }

body.vfh-on.single-product .product_title { font-family: var(--vf-serif) !important; font-weight: 400 !important; font-size: clamp(26px, 2.2vw, 34px) !important; line-height: 1.12 !important; letter-spacing: .01em !important; text-transform: uppercase !important; color: var(--vf-ink) !important; }
body.vfh-on.single-product .page-heading { background: none !important; margin: 0 !important; padding: 22px 0 4px !important; border: 0 !important; }
body.vfh-on.single-product .page-heading::before, body.vfh-on.single-product .page-heading::after { display: none !important; }
body.vfh-on.single-product .page-heading .woocommerce-breadcrumb, body.vfh-on.single-product .page-heading .woocommerce-breadcrumb a { font-family: var(--vf-sans) !important; font-size: 13px !important; color: var(--vf-text) !important; text-shadow: none !important; }
body.vfh-on.single-product .page-heading .woocommerce-breadcrumb a:hover { color: var(--vf-berry) !important; }
body.vfh-on.single-product .back-history,
body.vfh-on.single-product .posts-navigation,
body.vfh-on.single-product .posts-nav-btn,
body.vfh-on.single-product .et-or-wrapper,
body.vfh-on.single-product .et-single-buy-now,
body.vfh-on.single-product .size-guide { display: none !important; }
body.vfh-on.single-product :is(.summary, .product-information-inner) .price .amount, body.vfh-on.single-product :is(.summary, .product-information-inner) .price bdi { color: inherit !important; }
body.vfh-on.single-product .variations_button, body.vfh-on.single-product form.cart:not(.variations_form) { display: flex !important; align-items: stretch; gap: 10px; flex-wrap: wrap; }
body.vfh-on.single-product .variations_button .single_add_to_cart_button, body.vfh-on.single-product form.cart:not(.variations_form) .single_add_to_cart_button { flex: 1 1 200px; width: auto !important; margin: 0 !important; }
body.vfh-on.single-product .single_add_to_cart_button.disabled { opacity: .55 !important; }
body.vfh-on.single-product .variations_button .quantity, body.vfh-on.single-product form.cart:not(.variations_form) .quantity { display: inline-flex !important; align-items: stretch; height: 52px; margin: 0 !important; border: 1px solid var(--vf-line) !important; border-radius: 0 !important; background: #FFFFFF; }
body.vfh-on.single-product .quantity .minus, body.vfh-on.single-product .quantity .plus { display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: auto !important; border: 0 !important; color: var(--vf-berry) !important; cursor: pointer; }
body.vfh-on.single-product .quantity input.qty { width: 40px !important; height: 100% !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font-family: var(--vf-sans) !important; font-size: 15px !important; color: var(--vf-ink) !important; text-align: center; -moz-appearance: textfield; }
body.vfh-on.single-product .quantity input.qty::-webkit-outer-spin-button, body.vfh-on.single-product .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.vfh-on.single-product .single-wishlist a { color: var(--vf-text) !important; font-family: var(--vf-sans) !important; font-size: 13px !important; }
body.vfh-on.single-product .single-wishlist a:hover { color: var(--vf-berry) !important; }
body.vfh-on.single-product :is(.summary, .product-information-inner) .price { font-family: var(--vf-sans) !important; font-size: 18px !important; font-weight: 500 !important; color: var(--vf-ink) !important; }
body.vfh-on.single-product :is(.summary, .product-information-inner) .price ins { color: var(--vf-berry) !important; text-decoration: none !important; }
body.vfh-on.single-product :is(.summary, .product-information-inner) .price del { color: var(--vf-muted) !important; }
body.vfh-on.single-product .woocommerce-product-details__short-description,
body.vfh-on.single-product .woocommerce-Tabs-panel { font-family: var(--vf-sans); font-size: 15px; line-height: 1.75; color: var(--vf-text); }
body.vfh-on.single-product .variations label { font-family: var(--vf-sans) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--vf-ink) !important; }

/* Our product page (includes/product-page.php): photos left, the details right. */
.vf-product { padding-bottom: clamp(24px, 3vw, 48px); }
.vfq-crumbs { display: flex; flex-wrap: wrap; gap: 8px; max-width: 1400px; margin: 0 auto; padding: 22px var(--vf-gutter) 0; font-size: 14px; color: var(--vf-muted); }
.vf-ui .vfq-crumbs a:hover { color: var(--vf-berry); }
.vfq-crumbs span:last-child { color: var(--vf-ink); }
.vfq-main { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; max-width: 1400px; margin: 0 auto; padding: 24px var(--vf-gutter) clamp(40px, 5vw, 72px); }
.vfq-gallery { position: sticky; top: calc(var(--vfh-h, 140px) - var(--vfa-h, 0px) + 16px); }
.vfq-photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #FFFFFF; border: 1px solid var(--vf-line); }
.vf-ui .vfq-photo img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; object-fit: contain !important; padding: 4%; }
.vfq-photo .vfx-badge.is-sale { top: 14px; left: 14px; width: 62px; height: 62px; font-size: 15px; }
.vfq-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.vf-ui .vfq-thumb { width: 84px; aspect-ratio: 1; padding: 4px; border: 1px solid var(--vf-line); background: #FFFFFF; transition: border-color .2s ease; }
.vf-ui .vfq-thumb.is-on, .vf-ui .vfq-thumb:hover { border-color: var(--vf-berry); }
.vf-ui .vfq-thumb img { width: 100%; height: 100%; object-fit: contain; }
.vf-ui .vfq-brand { font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--vf-muted); }
.vf-ui .vfq-title { margin-top: 10px; font-family: var(--vf-serif); font-size: clamp(30px, 3vw, 44px); font-weight: 400; line-height: 1.12; color: var(--vf-ink); }
.vf-ui .vfq-price { margin-top: 16px; font-size: 24px; font-weight: 600; color: var(--vf-ink); }
.vfq-price del { margin-right: 10px; font-weight: 400; color: var(--vf-muted); }
.vfq-price ins { text-decoration: none; }
.vfq-short { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--vf-line); }
.vf-ui .vfq-short p { margin-bottom: 10px; font-size: 17px; line-height: 1.7; color: var(--vf-text); }
.vfq-buy { margin-top: 24px; }
.vf-ui .vfq-buy form.cart { margin: 0 !important; }
.vf-ui .vfq-buy table.variations { width: 100%; margin: 0 0 16px !important; border: 0 !important; }
.vf-ui .vfq-buy table.variations th, .vf-ui .vfq-buy table.variations td { display: block; padding: 0 !important; border: 0 !important; background: none !important; text-align: left; }
.vf-ui .vfq-buy table.variations th label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vf-ink); }
.vf-ui .vfq-buy .reset_variations { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--vf-muted); }
.vf-ui .vfq-buy .woocommerce-variation-price { margin-bottom: 12px; font-size: 20px; font-weight: 600; }
.vf-ui .vfq-stock { margin-top: 24px; padding: 14px 16px; background: var(--vf-bone); font-size: 15px; color: var(--vf-ink); }
.vf-ui .vfq-added { margin-top: 12px; padding: 12px 14px; background: var(--vf-tint); border-left: 3px solid var(--vf-berry); font-size: 15px; color: var(--vf-ink); opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }
.vf-ui .vfq-added.is-in { opacity: 1; transform: none; }
.vf-ui .vfq-added a { color: var(--vf-berry) !important; font-weight: 600; text-decoration: underline !important; text-underline-offset: 3px; }
.vf-ui .vfq-add.is-busy { opacity: .7; pointer-events: none; }
.vf-ui .vfq-now { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-top: 10px; background: #000000; color: #FFFFFF !important; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; transition: background-color .2s ease; }
.vf-ui .vfq-now:hover { background: var(--vf-berry-deep); }
.vf-product .vf-pdp-note { margin: 24px 0 0; padding: 18px 0 0; border-top: 1px solid var(--vf-line); }
.vf-product .vf-pdp-note li { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 15px; color: var(--vf-text); }
.vf-ui.vf-product .vf-pdp-note li svg { width: 20px; height: 20px; color: var(--vf-berry); }
.vf-product .vf-pdp-links a { font-size: 14px; color: var(--vf-berry) !important; text-decoration: underline !important; text-underline-offset: 3px; }
.vfq-desc { max-width: 900px; margin: 0 auto; padding: clamp(32px, 4vw, 56px) var(--vf-gutter) 0; border-top: 1px solid var(--vf-line); }
.vf-ui .vfq-desc .vfx-title { margin-bottom: 18px; text-align: center; }
.vf-ui .vfq-desc-text p { margin-bottom: 14px; font-size: 17px; line-height: 1.8; color: var(--vf-text); }
body.vfh-on.single-product .woocommerce-notices-wrapper:empty { display: none; }
@media (max-width: 900px) {
	.vfq-main { grid-template-columns: 1fr; padding-top: 14px; }
	.vfq-gallery { position: static; }
	.vfq-thumbs { overflow-x: auto; }
	.vf-ui .vfq-thumb { flex: none; width: 68px; }
}

/* WooCommerce buttons across the shop: brand colour and square, like ours. */
body.vfh-on .single_add_to_cart_button,
body.vfh-on .woocommerce a.button.alt,
body.vfh-on .woocommerce button.button.alt,
body.vfh-on .woocommerce .checkout-button,
body.vfh-on #place_order {
	min-height: 52px; padding: 0 32px !important; border: 0 !important; border-radius: 0 !important; background: var(--vf-berry) !important; color: #FFFFFF !important;
	font-family: var(--vf-sans) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .16em !important; text-transform: uppercase !important; box-shadow: none !important; transition: background-color .25s ease;
}
body.vfh-on .single_add_to_cart_button:hover,
body.vfh-on .woocommerce a.button.alt:hover,
body.vfh-on .woocommerce button.button.alt:hover,
body.vfh-on .woocommerce .checkout-button:hover,
body.vfh-on #place_order:hover { background: var(--vf-berry-deep) !important; }
body.vfh-on.woocommerce-checkout .woocommerce-billing-fields h3,
body.vfh-on.woocommerce-checkout #order_review_heading,
body.vfh-on.woocommerce-cart .cart_totals h2 { font-family: var(--vf-serif) !important; font-weight: 400 !important; font-size: 28px !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--vf-ink) !important; }

/* ---------- Bag, checkout, account and 404 ---------- */

/* Our page head runs edge to edge above the theme's content box. */
.vf-store-head { margin-bottom: clamp(32px, 4vw, 56px); }
.vf-store { max-width: 1200px; margin: 0 auto; padding: 0 0 clamp(48px, 6vw, 88px); font-family: var(--vf-sans); color: var(--vf-text); }
body.vfh-on .cart-checkout-nav { display: none !important; }
body.vfh-on .vf-store h2, body.vfh-on .vf-store h3, body.vfh-on .vf-store #order_review_heading { font-family: var(--vf-serif) !important; font-weight: 400 !important; font-size: clamp(20px, 1.7vw, 24px) !important; letter-spacing: .01em !important; text-transform: uppercase !important; color: var(--vf-ink) !important; margin: 0 0 18px !important; }

/* Notices */
body.vfh-on .vf-store .woocommerce-message, body.vfh-on .vf-store .woocommerce-info, body.vfh-on .vf-store .woocommerce-error, body.vfh-on .vf-store .woocommerce-notice {
	margin: 0 0 24px !important; padding: 16px 20px !important; border: 0 !important; border-left: 3px solid var(--vf-berry) !important; border-radius: 0 !important; background: var(--vf-blush) !important; color: var(--vf-ink) !important; font-size: 14px !important; list-style: none;
}
body.vfh-on .vf-store .woocommerce-message::before, body.vfh-on .vf-store .woocommerce-info::before, body.vfh-on .vf-store .woocommerce-error::before { display: none !important; }
body.vfh-on .vf-store .woocommerce-message a, body.vfh-on .vf-store .woocommerce-info a, body.vfh-on .vf-store .woocommerce-error a { color: var(--vf-berry) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
body.vfh-on .vf-store .vf-wa-link { display: inline-block; margin-top: 10px; padding: 10px 18px; background: var(--vf-berry); color: #FFFFFF !important; text-decoration: none !important; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }

/* Fields */
body.vfh-on .vf-store .form-row label { display: block; margin-bottom: 6px; font-family: var(--vf-sans) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--vf-ink) !important; }
body.vfh-on .vf-store .form-row .required { color: var(--vf-berry) !important; text-decoration: none; border: 0; }
body.vfh-on .vf-store input.input-text, body.vfh-on .vf-store input[type="text"], body.vfh-on .vf-store input[type="email"], body.vfh-on .vf-store input[type="tel"], body.vfh-on .vf-store input[type="password"], body.vfh-on .vf-store select, body.vfh-on .vf-store textarea {
	width: 100%; min-height: 50px; padding: 12px 14px !important; border: 1px solid var(--vf-line) !important; border-radius: 0 !important; background: #FFFFFF !important; box-shadow: none !important; font-family: var(--vf-sans) !important; font-size: 15px !important; color: var(--vf-ink) !important; transition: border-color .2s ease;
}
body.vfh-on .vf-store textarea { min-height: 110px; }
body.vfh-on .vf-store input:focus, body.vfh-on .vf-store select:focus, body.vfh-on .vf-store textarea:focus { border-color: var(--vf-berry) !important; outline: none !important; }
body.vfh-on .vf-store .vf-hidden-field { display: none !important; }

/* Buttons: brand colour and square; secondary ones outlined. */
body.vfh-on .vf-store .button, body.vfh-on .vf-store button[type="submit"], body.vfh-on .vf-store a.checkout-button {
	display: inline-flex !important; align-items: center; justify-content: center; min-height: 50px; padding: 0 28px !important; border: 1px solid var(--vf-berry) !important; border-radius: 0 !important; background: var(--vf-berry) !important; color: #FFFFFF !important;
	font-family: var(--vf-sans) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .16em !important; text-transform: uppercase !important; box-shadow: none !important; text-decoration: none !important; transition: background-color .2s ease, color .2s ease;
}
body.vfh-on .vf-store .button:hover, body.vfh-on .vf-store button[type="submit"]:hover { background: var(--vf-berry-deep) !important; border-color: var(--vf-berry-deep) !important; }
body.vfh-on .vf-store button[name="update_cart"], body.vfh-on .vf-store button[name="apply_coupon"], body.vfh-on .vf-store .woocommerce-Button--previous, body.vfh-on .vf-store .woocommerce-button.view { background: #FFFFFF !important; color: var(--vf-berry) !important; }
body.vfh-on .vf-store button[name="update_cart"]:hover, body.vfh-on .vf-store button[name="apply_coupon"]:hover { background: var(--vf-berry) !important; color: #FFFFFF !important; }
body.vfh-on .vf-store .button:disabled, body.vfh-on .vf-store .button[disabled] { opacity: .45 !important; }

/* Tables: the bag, order review and order details. */
body.vfh-on .vf-store table.shop_table { width: 100%; margin: 0 0 24px !important; border: 0 !important; border-collapse: collapse !important; border-radius: 0 !important; font-size: 14px; }
body.vfh-on .vf-store table.shop_table th { padding: 12px 10px !important; border: 0 !important; border-bottom: 1px solid var(--vf-line) !important; background: none !important; font-family: var(--vf-sans) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--vf-muted) !important; text-align: left; }
body.vfh-on .vf-store table.shop_table td { padding: 16px 10px !important; border: 0 !important; border-bottom: 1px solid var(--vf-line) !important; background: none !important; vertical-align: middle; color: var(--vf-text); }
body.vfh-on .vf-store table.shop_table td.product-name a { color: var(--vf-ink) !important; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; font-size: 13px; }
body.vfh-on .vf-store table.shop_table td.product-name a:hover { color: var(--vf-berry) !important; }
body.vfh-on .vf-store table.shop_table td.product-thumbnail img { width: 84px !important; max-width: none; height: auto; }
body.vfh-on .vf-store table.shop_table .amount { color: var(--vf-ink); font-weight: 500; }
body.vfh-on .vf-store a.remove { display: inline-flex !important; align-items: center; justify-content: center; width: 28px !important; height: 28px !important; border: 1px solid var(--vf-stripe) !important; border-radius: 50% !important; color: var(--vf-berry) !important; font-size: 18px !important; line-height: 1 !important; background: none !important; }
body.vfh-on .vf-store a.remove:hover { background: var(--vf-berry) !important; color: #FFFFFF !important; }
body.vfh-on .vf-store .quantity { display: inline-flex !important; align-items: stretch; height: 44px; border: 1px solid var(--vf-line) !important; }
body.vfh-on .vf-store .quantity .minus, body.vfh-on .vf-store .quantity .plus { display: inline-flex !important; align-items: center; justify-content: center; width: 34px; border: 0 !important; color: var(--vf-berry) !important; cursor: pointer; }
body.vfh-on .vf-store .quantity input.qty { width: 40px !important; min-height: 0 !important; height: 100% !important; padding: 0 !important; border: 0 !important; text-align: center; -moz-appearance: textfield; }
body.vfh-on .vf-store .quantity input.qty::-webkit-outer-spin-button, body.vfh-on .vf-store .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.vfh-on .vf-store td.actions .coupon { display: flex; gap: 8px; }
body.vfh-on .vf-store td.actions .coupon .input-text { width: 200px !important; }

/* Bag totals and the order review: a soft panel. */
body.vfh-on .vf-store .cart_totals, body.vfh-on .vf-store #order_review { padding: 28px !important; background: var(--vf-bone) !important; border: 1px solid var(--vf-blush) !important; }
body.vfh-on .vf-store .cart_totals table.shop_table th, body.vfh-on .vf-store .cart_totals table.shop_table td, body.vfh-on .vf-store #order_review table.shop_table th, body.vfh-on .vf-store #order_review table.shop_table td { border-bottom-color: var(--vf-blush) !important; }
body.vfh-on .vf-store .order-total th, body.vfh-on .vf-store .order-total td, body.vfh-on .vf-store .order-total .amount { font-size: 16px !important; color: var(--vf-ink) !important; font-weight: 600 !important; }
body.vfh-on .vf-store .wc-proceed-to-checkout { padding: 8px 0 0 !important; }
body.vfh-on .vf-store .wc-proceed-to-checkout a.checkout-button { width: 100%; min-height: 54px; font-size: 13px !important; }

/* Payment */
body.vfh-on .vf-store #payment { background: none !important; border-radius: 0 !important; }
body.vfh-on .vf-store #payment ul.payment_methods { padding: 0 0 16px !important; border: 0 !important; }
body.vfh-on .vf-store #payment ul.payment_methods li { padding: 12px 0 !important; list-style: none; }
body.vfh-on .vf-store #payment ul.payment_methods li label { font-size: 15px !important; font-weight: 500 !important; color: var(--vf-ink) !important; }
body.vfh-on .vf-store #payment ul.payment_methods li input[type="radio"] { accent-color: var(--vf-berry); }
body.vfh-on .vf-store #payment div.payment_box { margin: 10px 0 0 !important; padding: 14px 16px !important; background: #FFFFFF !important; border-radius: 0 !important; color: var(--vf-text) !important; font-size: 14px !important; }
body.vfh-on .vf-store #payment div.payment_box::before { display: none !important; }
body.vfh-on .vf-store #payment .place-order { padding: 0 !important; }
body.vfh-on .vf-store #place_order { width: 100% !important; min-height: 56px; font-size: 13px !important; }
body.vfh-on .vf-store .woocommerce-privacy-policy-text, body.vfh-on .vf-store .woocommerce-terms-and-conditions-wrapper { font-size: 13px; line-height: 1.6; color: var(--vf-muted); }
body.vfh-on .vf-store .woocommerce-privacy-policy-text a { color: var(--vf-berry) !important; }
body.vfh-on .vf-store input[type="checkbox"] { accent-color: var(--vf-berry); }

/* Order received */
body.vfh-on .vf-store ul.order_details { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 32px !important; padding: 0 !important; border: 1px solid var(--vf-blush); }
body.vfh-on .vf-store ul.order_details li { flex: 1 1 160px; margin: 0 !important; padding: 18px 20px !important; border: 0 !important; border-right: 1px solid var(--vf-blush) !important; font-size: 11px !important; letter-spacing: .14em; text-transform: uppercase; color: var(--vf-muted); }
body.vfh-on .vf-store ul.order_details li strong { display: block; margin-top: 6px; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--vf-ink); }

/* My account: sign in and create account side by side, then the account menu once signed in. */
body.vfh-on .vf-store .u-columns.col2-set { display: grid !important; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
body.vfh-on .vf-store .u-columns.col2-set .u-column1, body.vfh-on .vf-store .u-columns.col2-set .u-column2 { width: auto !important; float: none !important; max-width: none !important; padding: 0 !important; }
body.vfh-on .vf-store form.woocommerce-form-login, body.vfh-on .vf-store form.woocommerce-form-register, body.vfh-on .vf-store form.lost_reset_password { margin: 0 !important; padding: 32px !important; border: 1px solid var(--vf-line) !important; border-radius: 0 !important; background: #FFFFFF; }
body.vfh-on .vf-store .woocommerce-form-login__submit, body.vfh-on .vf-store .woocommerce-form-register__submit { width: 100%; margin-top: 8px !important; }
body.vfh-on .vf-store .woocommerce-LostPassword a, body.vfh-on .vf-store .lost_password a { color: var(--vf-berry) !important; font-size: 13px; }
body.vfh-on .vf-store .woocommerce-MyAccount-navigation ul { margin: 0 !important; padding: 0 !important; list-style: none; border-top: 1px solid var(--vf-line); }
body.vfh-on .vf-store .woocommerce-MyAccount-navigation li { margin: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--vf-line); }
body.vfh-on .vf-store .woocommerce-MyAccount-navigation li a { display: block; padding: 14px 4px !important; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--vf-text) !important; }
body.vfh-on .vf-store .woocommerce-MyAccount-navigation li.is-active a, body.vfh-on .vf-store .woocommerce-MyAccount-navigation li a:hover { color: var(--vf-berry) !important; }
body.vfh-on .vf-store .woocommerce-MyAccount-content a:not(.button) { color: var(--vf-berry); }

/* 404 */
.vfp-404 { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: clamp(36px, 5vw, 64px) var(--vf-gutter) clamp(48px, 6vw, 80px); }
.vfp-404-search { display: flex; align-items: center; gap: 10px; width: min(480px, 100%); border-bottom: 1px solid var(--vf-berry); color: var(--vf-berry); }
.vf-ui .vfp-404-search input[type="search"] { flex: 1; min-width: 0; height: 50px; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; font-family: var(--vf-sans); font-size: 16px; color: var(--vf-ink); outline: none; }
.vfp-404-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.vf-ui .vfp-404-links .vfx-btn-line { border-color: var(--vf-berry); color: var(--vf-berry) !important; }
.vf-ui .vfp-404-links .vfx-btn-line:hover { background: var(--vf-berry); color: #FFFFFF !important; }
body.vfh-on.error404 .page-heading { display: none !important; }

/* The theme's wishlist needs a plugin that isn't installed, so its links are hidden. */
body.vfh-on .single-wishlist, body.vfh-on .et-wishlist-holder, body.vfh-on .xstore-wishlist { display: none !important; }

@media (max-width: 767px) {
	body.vfh-on .vf-store .u-columns.col2-set { grid-template-columns: 1fr; }
	body.vfh-on .vf-store form.woocommerce-form-login, body.vfh-on .vf-store form.woocommerce-form-register { padding: 22px !important; }
	body.vfh-on .vf-store .cart_totals, body.vfh-on .vf-store #order_review { padding: 20px !important; }
	body.vfh-on .vf-store td.actions .coupon { flex-direction: column; }
	body.vfh-on .vf-store td.actions .coupon .input-text { width: 100% !important; }
}

/* ---------- VIP popup ---------- */

.vfo { position: fixed; inset: 0; z-index: 9997; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(17, 17, 17, 0); transition: background-color .35s ease; }
.vfo[hidden], .vfo-step[hidden], .vfo-error[hidden] { display: none !important; }
.vfo.is-open { background: rgba(17, 17, 17, .5); }
.vfo-box { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; width: min(820px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: #FFFFFF; box-shadow: 0 30px 80px rgba(0, 0, 0, .25); opacity: 0; transform: translateY(18px); transition: opacity .35s ease, transform .35s var(--vf-ease); }
.vfo.is-open .vfo-box { opacity: 1; transform: none; }
.vfo-media { position: relative; min-height: 470px; overflow: hidden; background: linear-gradient(160deg, var(--vf-sand) 0%, #8C7B6B 100%); }
.vfo-media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 25%; }
.vfo-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 45%); }
.vfo-stamp { position: absolute; left: 24px; bottom: 24px; z-index: 1; color: #FFFFFF; }
.vf-ui .vfo-stamp .vf-logo { width: auto; height: 16px; }
.vfo-body { display: flex; flex-direction: column; justify-content: center; padding: 52px 46px 40px; }
.vf-ui .vfo-close { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF; color: var(--vf-ink); }
.vf-ui .vfo-close svg { width: 20px; height: 20px; }
.vf-ui .vfo-kicker { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--vf-muted); }
.vf-ui .vfo-title { margin-top: 12px; font-family: var(--vf-serif); font-size: 40px; line-height: 1.05; color: var(--vf-ink); }
.vf-ui .vfo-text { margin-top: 12px; font-size: 14.5px; line-height: 1.65; color: var(--vf-muted); }
.vf-ui .vfo-offer { align-self: flex-start; margin-top: 16px; padding: 8px 14px; background: var(--vf-blush); color: var(--vf-ink); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.vfo-form { display: grid; gap: 10px; margin-top: 24px; }
.vf-ui .vfo-form input[type="email"], .vf-ui .vfo-form input[type="tel"] {
	display: block; width: 100%; height: 50px; margin: 0; padding: 0 16px; border: 1px solid var(--vf-line) !important; border-radius: 0 !important; background: #FFFFFF !important; box-shadow: none !important;
	font-family: var(--vf-sans); font-size: 15px; color: var(--vf-ink); outline: none; transition: border-color .2s ease;
}
.vf-ui .vfo-form input:focus { border-color: var(--vf-ink) !important; }
.vf-ui .vfo-form button, .vf-ui .vfo-cta { height: 52px; width: 100%; background: var(--vf-ink); color: #FFFFFF; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; transition: background-color .2s ease; }
.vf-ui .vfo-form button:hover, .vf-ui .vfo-cta:hover { background: var(--vf-berry); }
.vf-ui .vfo-form button[disabled] { opacity: .7; cursor: wait; }
.vf-ui .vfo-cta { margin-top: 26px; }
.vf-ui .vfo-error { font-size: 13px; color: #A12A2A; }
.vf-ui .vfo-small { margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--vf-muted); }
.vf-ui .vfo-no { align-self: flex-start; margin-top: 12px; font-size: 12px; color: var(--vf-muted); text-decoration: underline; text-underline-offset: 3px; }
.vf-ui .vfo-no:hover { color: var(--vf-ink); }

/* ---------- Scroll animations (assets/anim.js) ----------
   html.vf-anim is set in the page head; anything listed here starts slightly lower and
   transparent, then rises into place once it scrolls into view (.is-in). */

@keyframes vfRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes vfZoom { from { transform: scale(1.06); } to { transform: scale(1); } }

.vf-anim :is(.vfx-cat, .vfx-card, .vff-perk, .vff-cols > *, .vff-vip, .vfp-values > div, .vfp-card, .vfp-faq-list > section, .vff-faq-list > .vfp-q, .vfx-head, .vfx-banner-text, .vfp-head, .vfp-split-media, .vfp-split-text, .vfp-cta, .vfp-form-wrap, .vfp-still, .vfp-text > section, .vfs-cats, .vfs-bar) {
	transition: opacity .9s ease, transform 1s var(--vf-ease);
	transition-delay: calc(var(--d, 0) * 80ms);
}
.vf-anim :is(.vfx-cat, .vfx-card, .vff-perk, .vff-cols > *, .vff-vip, .vfp-values > div, .vfp-card, .vfp-faq-list > section, .vff-faq-list > .vfp-q, .vfx-head, .vfx-banner-text, .vfp-head, .vfp-split-media, .vfp-split-text, .vfp-cta, .vfp-form-wrap, .vfp-still, .vfp-text > section, .vfs-cats, .vfs-bar):not(.is-in) {
	opacity: 0;
	transform: translateY(22px);
}

/* Hero: the photo settles from a slight zoom and the words rise one after another. */
.vf-anim .vfx-hero .vfx-media img { animation: vfZoom 2.6s var(--vf-ease) both; }
.vf-anim .vfx-hero-text > * { animation: vfRise 1s var(--vf-ease) both; }
.vf-anim .vfx-hero-text > :nth-child(1) { animation-delay: .2s; }
.vf-anim .vfx-hero-text > :nth-child(2) { animation-delay: .35s; }
.vf-anim .vfx-hero-text > :nth-child(3) { animation-delay: .55s; }
.vf-anim .vfx-hero-text > :nth-child(4) { animation-delay: .7s; }

/* Banners: the photo eases out of a slight zoom as it comes into view. */
.vf-anim .vfx-banner .vfx-media img { transition: transform 1.8s var(--vf-ease); }
.vf-anim .vfx-banner:not(.is-in) .vfx-media img { transform: scale(1.06); }

/* ---------- Product sliders (assets/slider.js) ---------- */

.vfx-arrows { display: inline-flex; gap: 6px; }
.vf-ui .vfx-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--vf-stripe); border-radius: 50%; color: var(--vf-berry); background: #FFFFFF; transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease; }
.vf-ui .vfx-arrow:hover:not([disabled]) { background: var(--vf-berry); border-color: var(--vf-berry); color: #FFFFFF; }
.vf-ui .vfx-arrow[disabled] { opacity: .35; cursor: default; }
.vf-ui .vfx-arrow svg { width: 18px; height: 18px; }

.vfx-track {
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 16px) / 6.25); gap: 16px;
	max-width: 1600px; margin: 0 auto;
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--vf-gutter);
	padding: 0 var(--vf-gutter) 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab;
}
.vfx-track::-webkit-scrollbar { display: none; }
.vfx-track > .vfx-card { scroll-snap-align: start; }
.vfx-track img { -webkit-user-drag: none; user-select: none; }
.vfx-track.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.vfx-track:focus-visible { outline: 2px solid var(--vf-ink); outline-offset: -2px; }
.vfx-progress { position: relative; height: 2px; max-width: calc(1600px - 2 * var(--vf-gutter)); margin: 32px var(--vf-gutter) 0; background: var(--vf-blush); overflow: hidden; }
@media (min-width: 1700px) { .vfx-progress { margin-left: auto; margin-right: auto; } }
.vfx-progress span { position: absolute; top: 0; bottom: 0; left: 0; width: 25%; background: var(--vf-berry); transition: transform .15s linear; }
.vfx-new.no-scroll .vfx-arrows, .vfx-new.no-scroll .vfx-progress { display: none; }
.vfx-new.no-scroll .vfx-track { cursor: default; }
.vfx-more { display: flex; justify-content: center; margin-top: 48px; padding: 0 var(--vf-gutter); }


/* Contact page: one card per shop. */
.vfp-shops { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1280px; margin: 0 auto; padding: clamp(48px, 6vw, 88px) var(--vf-gutter) 0; }
.vfp-shop { padding: clamp(28px, 3vw, 44px); background: var(--vf-bone); border: 1px solid var(--vf-line); }
.vf-ui .vfp-shop h3 { margin: 10px 0 20px; font-size: clamp(26px, 2.4vw, 36px); }
.vfp-shop ul { display: grid; gap: 12px; margin-bottom: 24px; }
.vfp-shop li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--vf-ink); }
.vf-ui .vfp-shop li svg { width: 20px; height: 20px; color: var(--vf-berry); }
.vfp-shop li a { border-bottom: 1px solid var(--vf-stripe); }
.vf-ui .vfp-shop li a:hover { color: var(--vf-berry); border-color: var(--vf-berry); }
.vfp-shops + .vfp-contact { padding-top: clamp(32px, 4vw, 56px); }
.vf-ui .vfp-shop-where { margin: -8px 0 22px; font-size: 15px; line-height: 1.6; color: var(--vf-text); }
/* One shop: the card runs the full width, its ways to reach us in a row. */
.vfp-shops > .vfp-shop:only-child { grid-column: 1 / -1; }
.vfp-shops > .vfp-shop:only-child ul { display: flex; flex-wrap: wrap; gap: 12px 36px; }

/* Delivery page: the three ways to get an order, side by side. */
.vfp-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 48px; }
.vfp-way { padding: 24px 22px; background: var(--vf-bone); border: 1px solid var(--vf-line); }
.vf-ui .vfp-way svg { width: 26px; height: 26px; color: var(--vf-berry); }
.vf-ui .vfp-text .vfp-way h3 { margin: 14px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--vf-ink); }
.vf-ui .vfp-text .vfp-way-fee { margin: 0 0 8px; font-family: var(--vf-serif); font-size: 26px; line-height: 1.2; color: var(--vf-berry); }
.vf-ui .vfp-text .vfp-way p:last-child { margin: 0; font-size: 14px; line-height: 1.6; }

/* Checkout: delivery is paid to the rider, said once at the top. */
.vf-ui.vf-fee-notice { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 28px; padding: 16px 20px; background: var(--vf-tint); border-left: 3px solid var(--vf-berry); }
.vf-ui.vf-fee-notice svg { flex: none; width: 24px; height: 24px; margin-top: 1px; color: var(--vf-berry); }
.vf-ui.vf-fee-notice p { font-size: 15.5px; line-height: 1.6; color: var(--vf-ink); }
.vf-ui.vf-fee-notice strong { font-weight: 700; }

/* Checkout: the rider's fee line in the order summary. */
body.vfh-on .vf-store tr.vf-fee-note td { font-size: 13px !important; color: var(--vf-text) !important; }

/* Order received: send the order on WhatsApp. */
.vf-ui.vf-thanks { margin: 0 0 32px; padding: 24px 26px; background: var(--vf-blush); border-left: 3px solid var(--vf-berry); }
.vf-ui.vf-thanks p { font-size: 15px; line-height: 1.6; color: var(--vf-ink); }
.vf-ui.vf-thanks .vfx-btn { margin-top: 16px; }
.vf-ui.vf-thanks .vfx-btn svg { width: 20px; height: 20px; }
.vf-ui.vf-thanks .vf-thanks-note { margin-top: 10px; font-size: 13px; color: var(--vf-muted); }

/* ---------- Large screens ---------- */

@media (max-width: 1360px) {
	.vfx-products { grid-template-columns: repeat(5, 1fr); }
	.vff-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1200px) {
	.vfx-products { grid-template-columns: repeat(4, 1fr); }
	.vfx-cat-grid { grid-auto-columns: calc((100% - 3 * 14px) / 4); gap: 14px; }
	.vfx-feature-grid { grid-template-columns: repeat(2, 1fr); }
	.vfx-feature-grid > .vfx-card:nth-child(n+5) { display: none; }
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.vfh-bar, .vfh-wrap.is-scrolled .vfh-bar { height: 78px; column-gap: 8px; }
	.vfh-help, .vfh-branch-d { display: none !important; }
	.vfh-branch-m { display: inline-flex !important; }
	.vf-ui .vfh-logo .vf-logo-wide, .vf-ui .vfh-wrap.is-scrolled .vfh-logo .vf-logo-wide { height: 50px; }
	.vfx-hero.is-word { height: clamp(420px, 60vw, 560px); }
	.vf-ui .vfh-bar .vf-word-lockup, .vf-ui .vfh-wrap.is-scrolled .vfh-bar .vf-word-lockup { font-size: 34px; }

	.vfx-products { grid-template-columns: repeat(3, 1fr); }
	.vfx-track { grid-auto-columns: calc((100% - 2 * 12px) / 3.3); gap: 12px; }
	.vfx-cat-grid { grid-auto-columns: calc((100% - 2 * 12px) / 3.2); gap: 12px; }
	.vfx-cats.is-brands .vfx-cat-grid { grid-auto-columns: calc((100% - 12px) / 2.3); }
	.vfx-feature, .vfx-feature.is-right { grid-template-columns: 1fr; grid-template-areas: "title" "media" "grid"; }
	.vfx-feature-media { min-height: 0; aspect-ratio: 16 / 10; margin-bottom: 28px; }
	.vfx-feature-grid { grid-template-columns: repeat(3, 1fr); }
	.vfx-feature-grid > .vfx-card:nth-child(n+5) { display: flex; }

	.vff-top { grid-template-columns: 1fr; }
	.vff-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vfp-split, .vfp-contact, .vfp-faq { grid-template-columns: 1fr; }
	.vfp-split-media { max-width: 560px; }
	.vfp-faq-nav { position: static; flex-direction: row; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--vf-gutter)); padding: 0 var(--vf-gutter) 4px; scrollbar-width: none; }
	.vfp-faq-nav::-webkit-scrollbar { display: none; }
	.vfp-faq-nav a { flex: none; padding: 10px 16px; border: 1px solid var(--vf-line); letter-spacing: .08em; color: var(--vf-ink); }

	.vfs-cats { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.vfs-cats::-webkit-scrollbar { display: none; }
}

/* ---------- Phones ---------- */

@media (max-width: 767px) {
	.vfh-announce { padding: 8px 44px 8px 16px; text-align: left; }
	.vfh-announce p { font-size: 11.5px; line-height: 1.45; }
	.vf-ui .vfh-announce-x { right: 4px; }
	.vfh-bar { height: 70px; }
	.vfh-icon, .vf-ui .vfh-icon { width: 44px !important; height: 44px !important; }
	.vfh-left { gap: 0; }
	.vfh-right { gap: 0; }
	.vfh-account { display: none !important; }
	.vfh-menu-txt, .vfh-bag-text { display: none !important; }
	.vf-ui .vfh-menu { height: 40px; box-shadow: none; }
	.vfh-menu-ico { width: 42px; }
	.vfh-left { gap: 4px; }
	.vfh-bag { margin-left: 0; }
	/* Phones: the small line and the box above the photo, the word along the bottom. */
	.vfx-hero.is-word { height: 124vw; max-height: 600px; }
	.vf-ui .vfx-hero-photo { height: 80%; max-width: 100vw; }
	.vf-ui .vfx-hero-kicker { left: 5%; bottom: auto; top: 5%; max-width: 8em; font-size: 15px; letter-spacing: .42em; }
	.vf-ui .vfx-hero-shop { right: 5%; bottom: auto; top: 5%; padding: 9px 16px 8px; }
	.vfx-hero-shop small { font-size: 11px; }
	.vfx-hero-shop b { font-size: 19px; }
	.vfx-float { font-size: 15px; }
	.vfx-float-1 { top: 22%; left: 5%; }
	.vfx-float-2, .vfx-float-3 { display: none; }
	.vfx-float-4 { display: none; }
	.vfx-hero-wedge { width: 46%; height: 8%; }
	/* No photo yet: a shorter hero, so the page does not open on empty space. */
	.vfx-hero.is-word.is-empty { height: 78vw; }
	.vf-ui .vfx-hero.is-word.is-empty .vfx-hero-kicker, .vf-ui .vfx-hero.is-word.is-empty .vfx-hero-shop { top: 10%; }
	.vfx-hero.is-word.is-empty .vfx-float-1 { top: 45%; }
	.vf-ui .vfx-hero-photos .vfx-hero-video { width: 100vw; height: 82%; }
	.vf-ui .vfx-hero.has-video-full .vfx-hero-photos .vfx-hero-video { height: 100%; }
	.vf-ui .vfx-card-add { width: 100%; }
	.vfx-brands { grid-template-columns: 1fr; gap: 14px; padding-top: 18px; padding-bottom: 18px; text-align: center; }
	.vf-ui .vfx-brands-title { padding-right: 0; font-size: 22px; }
	.vfx-brands-title::after { content: none; }
	.vfx-marquee-track li { padding: 0 22px; }
	.vfx-brand { height: 40px; }
	.vf-ui .vfx-brand-img { height: 30px !important; max-width: 120px !important; }
	.vfx-brand-name { font-size: 14px; }
	.vf-ui .vfh-icon svg { width: 23px; height: 23px; }
	.vf-ui .vfh-bar .vf-word-lockup, .vf-ui .vfh-wrap.is-scrolled .vfh-bar .vf-word-lockup { font-size: 30px; }
	.vf-ui .vfh-logo .vf-logo-wide, .vf-ui .vfh-wrap.is-scrolled .vfh-logo .vf-logo-wide { height: 38px; }

	.vfx-hero { min-height: 440px; align-items: flex-end; }
	.vfx-hero.has-size { height: clamp(440px, calc(100vw * var(--vfx-hm) / var(--vfx-wm)), 760px); }
	.vfx-hero::after { background: linear-gradient(0deg, rgba(20, 20, 20, .66) 0%, rgba(20, 20, 20, .18) 50%, rgba(20, 20, 20, 0) 72%); }
	.vfx-hero.is-empty::before { right: -30%; top: 30%; width: 90vw; }
	.vfx-hero-text { padding: 48px var(--vf-gutter) 40px; }
	.vf-ui .vfx-hero h1 { font-size: 40px; }
	.vf-ui .vfx-hero .vfx-sub { margin: 14px 0 26px; font-size: 15px; }
	.vf-ui .vfx-btn { min-height: 48px; padding: 0 26px; }

	.vfx-head { margin-bottom: 24px; }
	.vf-ui .vfx-title { font-size: 28px; }
	.vfx-head .vfx-arrows { display: none; }
	.vfx-cat-grid { grid-auto-columns: 58%; gap: 10px; }
	.vfx-cats.is-brands .vfx-cat-grid { grid-auto-columns: 62%; }
	.vfx-cat-text { left: 14px; right: 14px; bottom: 14px; }
	.vfx-cat-name { font-size: 16px; }

	.vfx-banner { min-height: 400px; padding: 48px 20px; }
	.vf-ui .vfx-banner h2 { font-size: 36px; }
	.vf-ui .vfx-banner .vfx-banner-line { font-size: 15px; margin: 12px auto 24px; }
	.vfx-banner .vfx-btns { flex-direction: column; align-items: stretch; }
	/* On phones a bright banner's photo sits on top (4:5) and the words below it. */
	.vfx-light:not(.is-empty) { display: block; min-height: 0; padding: calc(125vw + 36px) 20px 48px; }
	.vf-ui .vfx-light .vfx-media { height: 125vw !important; bottom: auto !important; }
	.vf-ui .vfx-light .vfx-banner-line { margin: 12px 0 24px; }
	.vfx-split { grid-template-columns: 1fr; padding: 0; }
	.vfx-split-media { min-height: 0; aspect-ratio: 4 / 5; }
	.vfx-split .vfx-banner-text { padding: 44px 20px 52px; }

	.vfx-products, .vfx-feature-grid { grid-template-columns: 1fr 1fr; gap: 30px 12px; }
	.vfx-feature-grid > .vfx-card:nth-child(n+5) { display: none; }
	.vfx-feature { padding-top: 48px; padding-bottom: 48px; }
	.vfx-feature-title { margin-bottom: 22px !important; }
	.vfx-feature-media { aspect-ratio: 4 / 5; margin-bottom: 24px; }
	.vfx-track { grid-auto-columns: 46%; gap: 12px; }
	.vfx-card-img { margin-bottom: 10px; }
	.vf-ui .vfx-card-name { font-size: 13px; }
	.vf-ui .vfx-card-price { font-size: 13.5px; }
	.vfx-card-cat { margin-bottom: 6px; font-size: 9.5px; letter-spacing: .14em; }
	.vf-ui .vfx-card-add { min-height: 40px; font-size: 10.5px; letter-spacing: .1em; }
	.vfx-badge { top: 8px; left: 8px; padding: 5px 7px; font-size: 9.5px; }
	.vfx-progress { margin-top: 24px; }
	.vfx-more { margin-top: 36px; }
	.vfx-more .vfx-btn { width: 100%; }

	.vff-perks { grid-template-columns: 1fr; }
	.vff-perk { justify-content: flex-start; padding: 18px 20px; }
	.vff-perk + .vff-perk { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
	.vff-top { gap: 44px; padding: 48px 20px 24px; }
	.vff-cols { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
	.vff-shops { grid-column: 1 / -1; }
	.vf-ui .vff-secure img { width: 170px; }
	.vff-bottom { flex-direction: column; text-align: center; gap: 10px; padding: 22px 20px calc(88px + env(safe-area-inset-bottom)); }
	.vf-float { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
	.vf-ui .vf-wa { gap: 8px; height: 46px; padding: 0 16px 0 13px; font-size: 14px; }
	.vf-ui .vf-wa svg { width: 22px; height: 22px; }

	.vf-ui .vfp-head .vfp-intro { font-size: 15px; }
	.vfp-shops { grid-template-columns: 1fr; }
	.vfp-shop .vfx-btn { width: 100%; }
	.vfp-values { grid-template-columns: 1fr; gap: 32px; }
	.vfp-row { grid-template-columns: 1fr; }
	.vfp-form button { justify-self: stretch; }
	.vfp-card { padding: 18px; }
	.vfp-q summary { padding: 18px 0; font-size: 15px; }
	.vfp-still { padding: 32px 20px; }
	.vf-ui .vfp-text h2 { font-size: 24px; }
	.vf-ui .vfp-faq-list h2 { font-size: 26px; }

	.vfs-cats { gap: 4px 22px; padding: 14px 16px; }
	.vfs-cats a { font-size: 11px; }
	.vfs-bar { padding: 16px; }
	.vfs-sort label { display: none; }

	/* The VIP popup becomes a sheet that slides up from the bottom. */
	.vfo { align-items: flex-end; padding: 0; }
	.vfo-box { grid-template-columns: 1fr; width: 100%; max-height: 92vh; transform: translateY(100%); }
	.vfo.is-open .vfo-box { transform: none; }
	.vfo-media { min-height: 0; height: 180px; }
	.vfo-stamp { left: 20px; bottom: 18px; }
	.vfo-body { padding: 24px 20px calc(20px + env(safe-area-inset-bottom)); }
	.vf-ui .vfo-title { font-size: 30px; }
	.vf-ui .vfo-text { font-size: 14px; }
	.vfo-form { margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.vf-ui *, .vfh-wrap, .vfo, .vfo-box { transition: none !important; animation: none !important; }
}

/* The theme draws the quantity minus and plus and the bag on the Add to bag button with its icon
   font (about 120KB). Drawn here instead, so product pages no longer download that font. */
body.vfh-on .quantity .et-icon.et-minus::before, body.vfh-on .quantity .et-icon.et-plus::before { font-family: var(--vf-sans) !important; font-style: normal; font-size: 18px; line-height: 1; }
body.vfh-on .quantity .et-icon.et-minus::before { content: "\2212" !important; }
body.vfh-on .quantity .et-icon.et-plus::before { content: "+" !important; }
body.vfh-on .single_add_to_cart_button::before { content: "" !important; font-family: var(--vf-sans) !important; display: inline-block; width: 16px; height: 16px; margin: 0 8px 0 0; vertical-align: -3px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12.5H6z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12.5H6z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E") center / contain no-repeat; }

/* A feature with no photo chosen yet: no grey panel, the products take the whole width. */
.vfx-feature:has(.vfx-feature-media.is-empty), .vfx-feature.is-right:has(.vfx-feature-media.is-empty) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "grid"; }
.vfx-feature-media.is-empty { display: none; }
.vfx-feature:has(.vfx-feature-media.is-empty) .vfx-feature-grid { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1024px) { .vfx-feature:has(.vfx-feature-media.is-empty) .vfx-feature-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .vfx-feature:has(.vfx-feature-media.is-empty) .vfx-feature-grid { grid-template-columns: 1fr 1fr; } }