/*
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/kadence-theme/
Description: Child theme for the Kadence theme, skinned to match the Vape Nicotine Free brand.
Author: Vape Nicotine Free
Author URI: https://vapenicotinefree.com
Template: kadence
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kadence-child
*/

@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@300;400;500;600;700&display=swap');

/* Font: Anuphan is loaded through Kadence Customizer > Typography (Google Fonts). */

/* ==========================================================================
   1. BRAND TOKENS  (mirrored from vapenicotinefree.com)
   ========================================================================== */
:root,
body {
	--vnf-magenta:        #a71493;
	--vnf-magenta-dark:   #86107a;
	--vnf-ink:            #101010;
	--vnf-ink-soft:       #1f1f1f;
	--vnf-muted:          #919191;
	--vnf-surface:        #f5f5f5;
	--vnf-white:          #ffffff;
	--vnf-hairline:       rgba(145, 145, 145, 0.2);

	--vnf-font:           'Anuphan', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--vnf-radius-pill:    30px;
	--vnf-radius-input:   10px;
	--vnf-radius-card:    12px;
	--vnf-content-width:  1400px;
}

/* --- Remap Kadence's global palette to the VNF palette ------------------- */
:root,
body,
.wp-site-blocks,
.entry-content {
	--global-palette1: #a71493; /* accent / buttons          */
	--global-palette2: #86107a; /* accent hover              */
	--global-palette3: #101010; /* headings                  */
	--global-palette4: #101010; /* body text                 */
	--global-palette5: #4a4a4a; /* secondary text            */
	--global-palette6: #919191; /* muted text / footer links */
	--global-palette7: #f5f5f5; /* light surface             */
	--global-palette8: #fafafa; /* lighter surface           */
	--global-palette9: #ffffff; /* white                     */

	--global-palette-highlight:       #a71493;
	--global-palette-highlight-alt:   #86107a;
	--global-palette-highlight-alt2:  #ffffff;
	--global-palette-btn-bg:          #a71493;
	--global-palette-btn-bg-hover:    #86107a;
	--global-palette-btn:             #ffffff;
	--global-palette-btn-hover:       #ffffff;

	--global-body-font-family:    var(--vnf-font);
	--global-heading-font-family: var(--vnf-font);
	--global-primary-nav-font-family: var(--vnf-font);

	--global-content-width: var(--vnf-content-width);
	--global-content-narrow-width: 900px;
}

/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */
body,
button,
input,
select,
optgroup,
textarea {
	font-family: var(--vnf-font);
	font-size: 16px;
	font-weight: 400;
	color: var(--vnf-ink);
}

body { background-color: var(--vnf-white); }

p {
	line-height: 27px;
	color: var(--vnf-ink);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
	font-family: var(--vnf-font);
	color: var(--vnf-ink);
	letter-spacing: 0;
}

h1 { font-size: 50px; font-weight: 500; line-height: 1.15; }
h2 { font-size: 30px; font-weight: 600; line-height: 1.2; }
h3 { font-size: 24px; font-weight: 500; line-height: 1.25; }
h4 { font-size: 20px; font-weight: 500; }
h5 { font-size: 18px; font-weight: 500; }
h6 { font-size: 16px; font-weight: 600; }

@media (max-width: 767px) {
	h1 { font-size: 32px; }
	h2 { font-size: 24px; }
	h3 { font-size: 20px; }
}

/* Section headings run uppercase on the storefront */
.vnf-section-title,
.woocommerce-products-header__title,
.related.products > h2,
.up-sells > h2,
.cross-sells > h2 {
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-bottom: 40px;
}

@media (max-width: 767px) {
	.vnf-section-title,
	.related.products > h2 { margin-bottom: 30px; }
}

a { color: var(--vnf-ink); text-decoration: none; }
a:hover,
a:focus { color: var(--vnf-magenta); }

/* ==========================================================================
   3. BUTTONS  (magenta pill, 30px radius, 600 weight)
   ========================================================================== */
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link,
.kb-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	font-family: var(--vnf-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: 0;
	color: var(--vnf-white);
	background-color: var(--vnf-magenta);
	border: 0;
	border-radius: var(--vnf-radius-pill);
	padding: 13px 26px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.kb-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	color: var(--vnf-white);
	background-color: var(--vnf-magenta-dark);
}

/* Secondary ink pill — matches the black CTAs on the storefront */
.vnf-btn-ink,
.wp-block-button.is-style-outline .wp-block-button__link,
.woocommerce a.button.wc-forward {
	background-color: var(--vnf-ink);
	color: var(--vnf-white);
	border: 0;
	border-radius: var(--vnf-radius-pill);
}

.vnf-btn-ink:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.woocommerce a.button.wc-forward:hover {
	background-color: var(--vnf-magenta);
	color: var(--vnf-white);
}

/* ==========================================================================
   4. FORM FIELDS  (10px radius, hairline border, 48px tall)
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	font-family: var(--vnf-font);
	font-size: 15px;
	color: var(--vnf-ink);
	background-color: var(--vnf-white);
	border: 1px solid var(--vnf-hairline);
	border-radius: var(--vnf-radius-input);
	padding: 12px 16px;
	min-height: 48px;
	box-shadow: none;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--vnf-magenta);
	outline: none;
	box-shadow: 0 0 0 3px rgba(167, 20, 147, 0.12);
}

::placeholder { color: var(--vnf-muted); opacity: 1; }

/* ==========================================================================
   5. HEADER — announcement bar, nav, utility icons
   ========================================================================== */
.site-top-header-wrap,
.header-top-row {
	background-color: var(--vnf-ink);
	color: var(--vnf-white);
	min-height: 47px;
}

.site-top-header-wrap a,
.site-top-header-wrap p,
.site-top-header-wrap .site-header-item,
.header-top-row a,
.header-top-row p {
	color: var(--vnf-white);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
}

.site-top-header-wrap a:hover,
.header-top-row a:hover { color: var(--vnf-magenta); }

.site-main-header-wrap { background-color: var(--vnf-white); }

.site-header-row-container-inner > .site-container {
	max-width: var(--vnf-content-width);
}

/* Primary navigation */
.header-navigation .header-menu-container > ul > li > a,
.main-navigation .primary-menu-container > ul > li > a {
	font-family: var(--vnf-font);
	font-size: 16px;
	font-weight: 500;
	color: var(--vnf-ink);
	text-transform: none;
	letter-spacing: 0;
	padding-top: 33px;
	padding-bottom: 33px;
}

.header-navigation .header-menu-container > ul > li > a:hover,
.header-navigation .header-menu-container > ul > li.current-menu-item > a {
	color: var(--vnf-magenta);
}

/* Dropdowns */
.header-navigation .header-menu-container ul ul.sub-menu {
	background-color: var(--vnf-white);
	border: 1px solid var(--vnf-hairline);
	border-radius: var(--vnf-radius-card);
	box-shadow: 0 12px 32px rgba(16, 16, 16, 0.08);
	padding: 8px 0;
	overflow: hidden;
}

.header-navigation .header-menu-container ul ul.sub-menu li a {
	font-size: 15px;
	font-weight: 400;
	color: var(--vnf-ink);
	padding: 10px 20px;
}

.header-navigation .header-menu-container ul ul.sub-menu li a:hover {
	color: var(--vnf-magenta);
	background-color: var(--vnf-surface);
}

/* Header search field */
.header-search-bar input[type="search"],
.search-form input.search-field {
	border-radius: var(--vnf-radius-input);
	border: 1px solid var(--vnf-hairline);
	min-height: 48px;
	font-size: 15px;
}

/* Cart / account icons */
.site-header-item .header-account-button,
.header-cart-wrap .header-cart-button { color: var(--vnf-ink); }

.header-cart-wrap .header-cart-button:hover,
.site-header-item .header-account-button:hover { color: var(--vnf-magenta); }

.header-cart-wrap .header-cart-total {
	background-color: var(--vnf-magenta);
	color: var(--vnf-white);
	font-weight: 600;
}

/* ==========================================================================
   6. FOOTER  (#f5f5f5 surface, 18px/500 titles, #919191 links)
   ========================================================================== */
.site-footer,
.site-middle-footer-wrap,
.site-top-footer-wrap,
.site-bottom-footer-wrap {
	background-color: var(--vnf-surface);
	color: var(--vnf-ink);
}

.site-footer .widget-title,
.site-footer h2,
.site-footer h3,
.site-footer h4 {
	font-family: var(--vnf-font);
	font-size: 18px;
	font-weight: 500;
	color: var(--vnf-ink);
	text-transform: none;
	margin-bottom: 18px;
}

.site-footer a,
.site-footer li a,
.site-footer p {
	font-size: 16px;
	font-weight: 400;
	color: var(--vnf-muted);
	line-height: 27px;
}

.site-footer a:hover,
.site-footer li a:hover { color: var(--vnf-ink); }

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; }

.site-bottom-footer-wrap { border-top: 1px solid var(--vnf-hairline); }

.site-bottom-footer-wrap p,
.site-bottom-footer-wrap .footer-html {
	font-size: 14px;
	color: var(--vnf-muted);
	line-height: 22px;
}

/* ==========================================================================
   7. WOOCOMMERCE — product cards, prices, badges
   ========================================================================== */
.woocommerce ul.products li.product { text-align: left; }

.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img {
	border-radius: var(--vnf-radius-card);
	background-color: var(--vnf-surface);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
	font-family: var(--vnf-font);
	font-size: 16px;
	font-weight: 500;
	color: var(--vnf-ink);
	line-height: 1.4;
	padding: 12px 0 6px;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--vnf-font);
	font-size: 16px;
	font-weight: 600;
	color: var(--vnf-ink);
}

.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
	color: var(--vnf-muted);
	font-weight: 400;
	opacity: 1;
}

.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
	color: var(--vnf-magenta);
	text-decoration: none;
	font-weight: 600;
}

.woocommerce span.onsale {
	background-color: var(--vnf-magenta);
	color: var(--vnf-white);
	font-size: 13px;
	font-weight: 600;
	border-radius: var(--vnf-radius-pill);
	padding: 6px 14px;
	min-height: 0;
	min-width: 0;
	line-height: 1.2;
}

.woocommerce .star-rating span::before,
.woocommerce p.stars a::before { color: var(--vnf-magenta); }

.woocommerce div.product .product_title { font-size: 34px; font-weight: 500; }

.woocommerce div.product .single_add_to_cart_button {
	border-radius: var(--vnf-radius-pill);
	background-color: var(--vnf-magenta);
	font-weight: 600;
	padding: 15px 32px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--vnf-magenta); }

.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--vnf-magenta);
	border-radius: var(--vnf-radius-input);
	background-color: var(--vnf-surface);
}

.woocommerce-message::before,
.woocommerce-info::before { color: var(--vnf-magenta); }

/* ==========================================================================
   8. TRUST / ICON ROW  (four-up strip under the hero)
   ========================================================================== */
.vnf-trust-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	padding: 28px 0;
	border-bottom: 1px solid var(--vnf-hairline);
	text-align: center;
}

.vnf-trust-row .vnf-trust-item {
	font-size: 14px;
	font-weight: 500;
	color: var(--vnf-ink);
}

.vnf-trust-row .vnf-trust-item svg,
.vnf-trust-row .vnf-trust-item img {
	display: block;
	margin: 0 auto 10px;
	width: 26px;
	height: 26px;
}

@media (max-width: 767px) {
	.vnf-trust-row { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

/* ==========================================================================
   9. MISC
   ========================================================================== */
::selection { background-color: var(--vnf-magenta); color: var(--vnf-white); }

.scroll-up-wrap .kadence-scroll-to-top {
	background-color: var(--vnf-ink);
	color: var(--vnf-white);
	border-radius: 50%;
}

.scroll-up-wrap .kadence-scroll-to-top:hover { background-color: var(--vnf-magenta); }


/* ==========================================================================
   10. HOMEPAGE SECTIONS
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.vnf-hero {
	background-color: var(--vnf-ink);
	background-size: cover;
	background-position: center;
	color: var(--vnf-white);
	text-align: center;
	padding: 110px 24px;
	margin-top: 0;
}

.vnf-hero .vnf-hero-kicker {
	color: var(--vnf-white);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.7;
	margin: 0 0 14px;
}

.vnf-hero .vnf-hero-title {
	color: var(--vnf-white);
	font-size: 62px;
	font-weight: 600;
	line-height: 1.05;
	margin: 0 0 16px;
	text-transform: uppercase;
}

.vnf-hero .vnf-hero-sub {
	color: rgba(255, 255, 255, 0.75);
	font-size: 18px;
	margin: 0 auto 32px;
	max-width: 640px;
}

@media (max-width: 767px) {
	.vnf-hero { padding: 64px 20px; }
	.vnf-hero .vnf-hero-title { font-size: 36px; }
	.vnf-hero .vnf-hero-sub { font-size: 16px; }
}

/* --- Ink pill button (class sits on the wrapper in block markup) ---------- */
.vnf-btn-ink .wp-block-button__link,
.wp-block-button.vnf-btn-ink .wp-block-button__link {
	background-color: var(--vnf-ink);
	color: var(--vnf-white);
	border-radius: var(--vnf-radius-pill);
	font-weight: 600;
	padding: 14px 30px;
}

.vnf-btn-ink .wp-block-button__link:hover {
	background-color: var(--vnf-magenta);
	color: var(--vnf-white);
}

.vnf-hero .vnf-btn-ink .wp-block-button__link {
	background-color: var(--vnf-white);
	color: var(--vnf-ink);
}

.vnf-hero .vnf-btn-ink .wp-block-button__link:hover {
	background-color: var(--vnf-magenta);
	color: var(--vnf-white);
}

/* --- Trust row ----------------------------------------------------------- */
.wp-block-columns.vnf-trust-row {
	margin: 0 auto;
	padding: 30px 0;
	border-bottom: 1px solid var(--vnf-hairline);
	gap: 16px;
}

.vnf-trust-row .vnf-trust-item {
	font-size: 14px;
	font-weight: 500;
	color: var(--vnf-ink);
	margin: 0;
}

/* --- Section titles ------------------------------------------------------ */
h2.vnf-section-title {
	text-transform: uppercase;
	font-size: 30px;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-top: 72px;
	margin-bottom: 40px;
}

@media (max-width: 767px) {
	h2.vnf-section-title { font-size: 24px; margin-top: 48px; margin-bottom: 30px; }
}

/* --- Brand tiles --------------------------------------------------------- */
.vnf-brand-tiles { gap: 20px; }

.vnf-brand-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 260px;
	padding: 24px;
	border-radius: var(--vnf-radius-card);
	background: linear-gradient(160deg, #2b2b3a 0%, #101010 100%);
	color: var(--vnf-white);
	overflow: hidden;
	transition: transform 0.2s ease;
}

.vnf-brand-tile:hover { transform: translateY(-4px); }

.vnf-brand-tile h3 {
	color: var(--vnf-white);
	font-size: 24px;
	font-weight: 600;
	margin: 0 0 4px;
}

.vnf-brand-tile p {
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	margin: 0;
}

/* --- Why Choose VNF ------------------------------------------------------ */
.vnf-why { margin-top: 80px; gap: 48px; }

.vnf-why .vnf-why-image img { border-radius: var(--vnf-radius-card); }

.vnf-why h2 { font-size: 34px; font-weight: 600; margin-bottom: 20px; }

.vnf-why p { color: #4a4a4a; }

.vnf-check-list { list-style: none; margin: 24px 0; padding: 0; }

.vnf-check-list li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 14px;
	line-height: 27px;
	color: #4a4a4a;
}

.vnf-check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 8px;
	height: 14px;
	border: solid var(--vnf-magenta);
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

.vnf-check-list li strong { color: var(--vnf-ink); font-weight: 600; }

@media (max-width: 781px) {
	.vnf-why { margin-top: 48px; gap: 28px; }
	.vnf-why h2 { font-size: 26px; }
}

/* --- FAQ ----------------------------------------------------------------- */
.vnf-faq { margin-top: 80px; }

.vnf-faq .vnf-faq-sub {
	color: var(--vnf-muted);
	font-size: 17px;
	margin-top: -20px;
	margin-bottom: 36px;
}

.vnf-faq-item {
	border: 1px solid var(--vnf-hairline);
	border-radius: var(--vnf-radius-card);
	padding: 4px 22px;
	margin-bottom: 12px;
	background-color: var(--vnf-white);
	transition: border-color 0.2s ease;
}

.vnf-faq-item[open] { border-color: var(--vnf-magenta); }

.vnf-faq-item summary {
	cursor: pointer;
	font-size: 17px;
	font-weight: 500;
	color: var(--vnf-ink);
	padding: 16px 0;
	list-style: none;
}

.vnf-faq-item summary::-webkit-details-marker { display: none; }

.vnf-faq-item summary::after {
	content: "+";
	float: right;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	color: var(--vnf-magenta);
}

.vnf-faq-item[open] summary::after { content: "-"; }

.vnf-faq-item p {
	color: #4a4a4a;
	padding-bottom: 16px;
	margin: 0;
}

/* --- Blog grid ----------------------------------------------------------- */
.vnf-blog-grid.wp-block-latest-posts.is-grid { gap: 28px; }

.vnf-blog-grid li img { border-radius: var(--vnf-radius-card); margin-bottom: 14px; }

.vnf-blog-grid .wp-block-latest-posts__post-title {
	font-size: 18px;
	font-weight: 500;
	color: var(--vnf-ink);
	line-height: 1.35;
}

.vnf-blog-grid .wp-block-latest-posts__post-date { color: var(--vnf-muted); font-size: 14px; }

.vnf-blog-grid .wp-block-latest-posts__post-excerpt { color: #4a4a4a; font-size: 15px; }

/* --- Newsletter band ----------------------------------------------------- */
.vnf-newsletter {
	background-color: var(--vnf-surface);
	padding: 64px 24px;
	margin-top: 80px;
	text-align: center;
}

.vnf-newsletter h2 {
	text-transform: uppercase;
	font-size: 28px;
	font-weight: 600;
	margin: 0 0 10px;
}

.vnf-newsletter p { color: var(--vnf-muted); margin: 0 0 26px; }

/* Let full-width homepage bands run edge to edge */
.page-template-default .content-area .alignfull,
.entry-content > .alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: auto;
}


/* --- Front page: drop the page-title hero, run content flush ------------- */
body.home .page-hero-section,
body.home .entry-hero-container-inner,
body.home .entry-hero .entry-header { display: none; }

body.home .site-main,
body.home .content-area,
body.home .content-container { padding-top: 0; margin-top: 0; }

body.home .entry-content > .vnf-hero:first-child { margin-top: 0; }


/* ==========================================================================
   11. HEADER / FOOTER BUILDER POLISH
   ========================================================================== */

/* Announcement bar */
.site-top-header-wrap .header-html,
.site-top-header-wrap .header-html p {
	color: var(--vnf-white);
	font-size: 15px;
	font-weight: 600;
	margin: 0;
}

/* Site title standing in for the logo until the VNF mark is uploaded */
.site-branding .site-title {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--vnf-ink);
}

.site-branding .site-title:hover { color: var(--vnf-magenta); }

/* Header utility icons */
.site-header-item .search-toggle-open .kadence-svg-iconset,
.header-cart-wrap .header-cart-button .kadence-svg-iconset { color: var(--vnf-ink); }

.header-cart-wrap .header-cart-total {
	border-radius: 50%;
	font-size: 11px;
	min-width: 18px;
	line-height: 18px;
}

/* Collapse the footer widget row until widgets are added post-migration */
.site-middle-footer-wrap:not(:has(.widget)):not(:has(.wp-block-heading)) { display: none; }

.site-bottom-footer-wrap .footer-html p {
	font-size: 13px;
	color: var(--vnf-muted);
	line-height: 21px;
	margin: 0;
	text-align: center;
}

.site-middle-footer-wrap .widget-area .widget-title {
	font-size: 18px;
	font-weight: 500;
	color: var(--vnf-ink);
	margin-bottom: 16px;
}


/* --- Branding: the VNF logo stands alone; title kept for screen readers --- */
.site-branding.branding-layout-standard .site-title-wrap {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.site-branding .brand.has-logo-image { gap: 0; }

.site-branding .custom-logo {
	height: auto;
	max-width: 170px;
}

@media (max-width: 767px) {
	.site-branding .custom-logo { max-width: 130px; }
}


/* ==========================================================================
   12. WOOCOMMERCE PRODUCT-COLLECTION BLOCKS
   (block markup differs from the classic [products] shortcode)
   ========================================================================== */
.wp-block-woocommerce-product-collection .wc-block-product-template,
.wc-block-product-template { gap: 28px 20px; }

.wc-block-product-template li { text-align: left; }

.wp-block-woocommerce-product-image img,
.wc-block-product-template img {
	border-radius: var(--vnf-radius-card);
	background-color: var(--vnf-surface);
}

.wc-block-components-product-name {
	font-family: var(--vnf-font);
	font-size: 16px;
	font-weight: 500;
	color: var(--vnf-ink);
	line-height: 1.4;
	display: block;
	margin: 12px 0 6px;
}

a.wc-block-components-product-name:hover { color: var(--vnf-magenta); }

.wc-block-components-product-price {
	font-family: var(--vnf-font);
	font-size: 16px;
	font-weight: 600;
	color: var(--vnf-ink);
}

.wc-block-components-product-price del {
	color: var(--vnf-muted);
	font-weight: 400;
	opacity: 1;
}

.wc-block-components-product-price ins {
	color: var(--vnf-magenta);
	text-decoration: none;
	font-weight: 600;
}

.wc-block-components-product-sale-badge,
.wp-block-woocommerce-product-sale-badge .wc-block-components-product-sale-badge {
	background-color: var(--vnf-magenta);
	color: var(--vnf-white);
	border: 0;
	border-radius: var(--vnf-radius-pill);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	padding: 5px 12px;
}

.wp-block-woocommerce-product-button .wp-block-button__link,
.wc-block-components-product-button .wp-block-button__link {
	background-color: var(--vnf-ink);
	color: var(--vnf-white);
	border: 0;
	border-radius: var(--vnf-radius-pill);
	font-size: 14px;
	font-weight: 600;
	padding: 11px 22px;
	width: 100%;
	text-align: center;
	margin-top: 12px;
}

.wp-block-woocommerce-product-button .wp-block-button__link:hover,
.wc-block-components-product-button .wp-block-button__link:hover {
	background-color: var(--vnf-magenta);
	color: var(--vnf-white);
}

@media (max-width: 767px) {
	.wc-block-product-template { gap: 20px 14px; }
}


/* ==========================================================================
   13. HERO CAROUSEL  (full-bleed banner slides, uses the .vnf-carousel engine)
   ========================================================================== */
.vnf-hero-carousel.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	gap: 0;
	margin-top: 0;
	margin-bottom: 0;
}

/* Hero slides are full-width, unlike the fixed-width cards elsewhere */
.vnf-hero-carousel > * {
	width: 100vw !important;
	max-width: 100vw !important;
	margin: 0 !important;
}

.vnf-hero-carousel figure,
.vnf-hero-carousel .wp-block-image { margin: 0; line-height: 0; }

.vnf-hero-carousel img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

/* These need !important because .vnf-carousel sets display:flex !important */
.vnf-hero-carousel--desktop { display: flex !important; }
.vnf-hero-carousel--mobile  { display: none !important; }

@media (max-width: 767px) {
	.vnf-hero-carousel--desktop { display: none !important; }
	.vnf-hero-carousel--mobile  { display: flex !important; }
}

/* The hidden variant must not reserve space or get wrapped for arrows */
.vnf-carousel-wrap:has(.vnf-hero-carousel--mobile) { display: none; }

@media (max-width: 767px) {
	.vnf-carousel-wrap:has(.vnf-hero-carousel--mobile) { display: block; }
	.vnf-carousel-wrap:has(.vnf-hero-carousel--desktop) { display: none; }
}

/* Arrows sit inside the banner rather than outside it */
.vnf-carousel-wrap:has(.vnf-hero-carousel) .vnf-carousel-prev { left: 18px; }
.vnf-carousel-wrap:has(.vnf-hero-carousel) .vnf-carousel-next { right: 18px; }

/* ==========================================================================
   14. CAROUSEL  (.vnf-carousel — any block group, unlimited cards, one line)
   ========================================================================== */
.vnf-carousel-wrap { position: relative; }

.vnf-carousel {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch;
	gap: 20px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 2px;
}

.vnf-carousel::-webkit-scrollbar { display: none; }

/* Every direct child is a card: fixed width, never wraps, snaps into place */
.vnf-carousel > * {
	flex: 0 0 auto !important;
	width: 280px;
	max-width: 78vw;
	margin: 0 !important;
	scroll-snap-align: start;
}

@media (max-width: 1024px) { .vnf-carousel > * { width: 240px; } }
@media (max-width: 767px)  { .vnf-carousel > * { width: 68vw; } }

/* Arrows (injected by the child theme script, only shown when it scrolls) */
.vnf-carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	padding: 0;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	line-height: 1;
	color: var(--vnf-white);
	background: rgba(16, 16, 16, 0.55);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.vnf-has-arrows .vnf-carousel-arrow { display: flex; }
.vnf-carousel-arrow:hover { background: var(--vnf-magenta); color: var(--vnf-white); }
.vnf-carousel-prev { left: -14px; }
.vnf-carousel-next { right: -14px; }

@media (max-width: 767px) {
	.vnf-carousel-arrow { width: 34px; height: 34px; font-size: 20px; }
	.vnf-carousel-prev { left: 2px; }
	.vnf-carousel-next { right: 2px; }
}

/* --- Brand cards ----------------------------------------------------------
   The brand artwork already carries its own name and "Browse Collection"
   lettering, so the card is sized to the image's true 3:4 ratio (nothing is
   cropped off the bottom) and the block's own text is kept for screen
   readers and as the click target, not shown twice.                      */
.vnf-brand-card.wp-block-cover {
	position: relative;
	aspect-ratio: 3 / 4;
	min-height: 0;
	padding: 0;
	border-radius: var(--vnf-radius-card);
	overflow: hidden;
}

.vnf-brand-card .wp-block-cover__image-background {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.vnf-brand-card:hover .wp-block-cover__image-background { transform: scale(1.05); }

.vnf-brand-card .wp-block-cover__inner-container {
	position: static;
	width: 100%;
}

/* The brand name stays in the DOM and is announced by screen readers, but is
   not painted. Deliberately NOT using clip/overflow to hide it: a clipping
   ancestor also clips the stretched link below, which made the card
   unclickable. font-size 0 + transparent hides it without clipping.        */
.vnf-brand-card .vnf-brand-name {
	position: static;
	margin: 0;
	font-size: 0;
	line-height: 0;
	color: transparent;
}

.vnf-brand-card .vnf-brand-name a {
	font-size: 0;
	color: transparent;
	text-decoration: none;
}

/* "Browse Collection" is already in the artwork, so fully hide this one */
.vnf-brand-card .vnf-brand-cta {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Stretched link — clicking anywhere on the card follows the name's link.
   z-index must beat the cover block's own background span (z-index 1).    */
.vnf-brand-card .vnf-brand-name a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
}


/* =========================================================================
   VNF homepage refinements - 2026-09-18
   Why-section band, section spacing, product card + carousel polish,
   trust-row icons. Appended; nothing above this line was changed.
   ========================================================================= */

/* --- Why Choose VNF: full-width tinted band ------------------------------ */
.entry-content > .wp-block-columns.vnf-why {
	background-color: var(--vnf-surface);
	padding-block: 64px;
	padding-inline: max(24px, calc(50vw - 645px));
	margin-top: 72px;
	margin-bottom: 56px;
	gap: 48px;
}

.vnf-why .vnf-why-image img {
	border-radius: var(--vnf-radius-card);
}

@media (max-width: 781px) {
	.entry-content > .wp-block-columns.vnf-why {
		padding-block: 44px;
		padding-inline: 24px;
		margin-top: 48px;
		margin-bottom: 40px;
		gap: 28px;
	}
}

/* --- Trust row: icons ---------------------------------------------------- */
.wp-block-columns.vnf-trust-row {
	padding: 22px 0;
}

.vnf-trust-row .vnf-trust-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--vnf-ink);
	margin: 0;
}

.vnf-trust-row .vnf-trust-item::before {
	content: "";
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: var(--vnf-trust-icon) center / contain no-repeat;
	mask: var(--vnf-trust-icon) center / contain no-repeat;
}

.vnf-trust-row .wp-block-column:nth-child(1) .vnf-trust-item { --vnf-trust-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M22%2011.08V12a10%2010%200%201%201-5.93-9.14%22/%3E%3Cpolyline%20points=%2222%204%2012%2014.01%209%2011.01%22/%3E%3C/svg%3E"); }
.vnf-trust-row .wp-block-column:nth-child(2) .vnf-trust-item { --vnf-trust-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%22/%3E%3Cpolyline%20points=%229%2012%2011%2014%2015%2010%22/%3E%3C/svg%3E"); }
.vnf-trust-row .wp-block-column:nth-child(3) .vnf-trust-item { --vnf-trust-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M11%2020A7%207%200%200%201%209.8%206.1C15.5%205%2017%204.48%2019%202c1%202%202%204.18%202%208%200%205.5-4.78%2010-10%2010Z%22/%3E%3Cpath%20d=%22M2%2022c2-2%204-4%208-4%22/%3E%3C/svg%3E"); }
.vnf-trust-row .wp-block-column:nth-child(4) .vnf-trust-item { --vnf-trust-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpolygon%20points=%2212%202%2015.09%208.26%2022%209.27%2017%2014.14%2018.18%2021.02%2012%2017.77%205.82%2021.02%207%2014.14%202%209.27%208.91%208.26%2012%202%22/%3E%3C/svg%3E"); }

@media (max-width: 767px) {
	.vnf-trust-row .vnf-trust-item {
		font-size: 13px;
		gap: 6px;
	}
	.vnf-trust-row .vnf-trust-item::before {
		flex-basis: 19px;
		width: 19px;
		height: 19px;
	}
}

/* --- Product cards: no drop shadow, aligned add-to-cart ------------------ */
.wc-block-product-template li.wc-block-product.loop-entry,
.wc-block-product-template li.wc-block-product.entry,
.woocommerce ul.products li.product.loop-entry {
	box-shadow: none;
}

.wc-block-product-template li.wc-block-product {
	display: flex;
	flex-direction: column;
}

/* Price and button ride the bottom of the card, so a short title
   no longer lifts the button above its neighbours. */
.wc-block-product-template li.wc-block-product > .wp-block-woocommerce-product-price {
	margin-top: auto;
	padding-top: 8px;
}

/* --- Product carousel: four across, then scroll -------------------------- */
ul.wc-block-product-template.is-product-collection-layout-carousel {
	column-gap: 20px;
	padding-inline: 4px;
	scroll-padding-inline: 4px;
	align-items: stretch;
}

/* Equal-height cards in the non-carousel grids too. */
ul.wc-block-product-template.is-flex-container {
	align-items: stretch;
}

@container carousel (min-width: 1000px) {
	ul.wc-block-product-template.is-product-collection-layout-carousel > li.wc-block-product {
		flex: 0 0 calc((100% - 60px) / 4);
		min-width: 0;
		max-width: none;
		scroll-snap-align: start;
	}
}

@container carousel (min-width: 700px) and (max-width: 999px) {
	ul.wc-block-product-template.is-product-collection-layout-carousel > li.wc-block-product {
		flex: 0 0 calc((100% - 40px) / 3);
		min-width: 0;
		max-width: none;
		scroll-snap-align: start;
	}
}

@container carousel (max-width: 699px) {
	ul.wc-block-product-template.is-product-collection-layout-carousel > li.wc-block-product {
		flex: 0 0 calc((100% - 20px) / 2);
		min-width: 0;
		max-width: none;
		scroll-snap-align: start;
	}
}

/* --- Carousel controls: plain arrows ------------------------------------- */
.wc-block-next-previous-buttons {
	gap: 4px;
}

.wc-block-next-previous-buttons__button,
.wc-block-next-previous-buttons .wc-block-next-previous-buttons__button {
	width: 34px;
	height: 34px;
	min-width: 0;
	padding: 0;
	background: transparent;
	background-color: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--vnf-ink);
	box-shadow: none;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.wc-block-next-previous-buttons__button:hover,
.wc-block-next-previous-buttons__button:focus-visible,
.wc-block-next-previous-buttons .wc-block-next-previous-buttons__button:hover {
	background: transparent;
	background-color: rgba(16, 16, 16, 0.06);
	color: var(--vnf-magenta);
}

.wc-block-next-previous-buttons__button[disabled],
.wc-block-next-previous-buttons__button:disabled {
	background: transparent;
	opacity: 0.3;
}

.wc-block-next-previous-buttons__icon {
	width: 11px;
	height: 17px;
}

/* --- Brand carousel: whole cards only, no peeking fifth ------------------ */
@media (min-width: 1025px) {
	.vnf-carousel.vnf-brand-carousel > * {
		width: calc((100% - 60px) / 4);
		max-width: none;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.vnf-carousel.vnf-brand-carousel > * {
		width: calc((100% - 40px) / 3);
		max-width: none;
	}
}