/**
 * _shared.css — recurring motifs across multiple page-flexible sections.
 *
 * Defines:
 *  - .ncm-section / .ncm-container — common section + inner container.
 *  - .ncm-btn-pill / .ncm-btn-pill--dark / .ncm-btn-pill--light — recurring pill CTAs.
 *  - .ncm-collage — recurring 2-image product collage motif (3 sections).
 *  - .ncm-overlay — flat tint overlay above a photographic background.
 *
 * Scoped to so the existing WP front page is
 * unaffected.
 */

.ncm-section {
	position: relative;
	width: 100%;
	font-family: var(--ff-primary);
	color: var(--clr-text);
	box-sizing: border-box;
}

.nv-index-posts.search.col h2.blog-entry-title.entry-title, .nv-index-posts.search.col h2.blog-entry-title.entry-title a {
    font-family: var(--ff-secondary);
    margin: 0 0 30px;
    color: var(--clr-bg-dark) !important;
    font-weight: 400;
    font-size: 30px;
    line-height: 34px;
    letter-spacing: 0%;
}

.nv-blog-default .wp-post-image {
    float: none !important;
    max-height: max-content !important;
}

article.nv-non-grid-article .article-content-col .nv-ft-wrap {
    margin-bottom: 20px !important;
}

span.page-numbers.current {
    background: var(--clr-bg-dark);
    color: #E9DDCE;
} 
.page-numbers li, .page-numbers a {
    background: #E9DDCE;
    color: var(--clr-bg-dark);
    transition: all 0.3s;
    font-size: 16px;
    line-height: normal;
        border-radius: 3px;
}

@media (max-width: 991px) {
    .nv-index-posts.search.col h2.blog-entry-title.entry-title, .nv-index-posts.search.col h2.blog-entry-title.entry-title a {
        font-size: 28px;
        line-height: normal;
        margin-bottom: 20px;
    }
}

.wrapper {
    min-height: unset;
}

.nv-index-posts.search.col {
    margin-top: 120px;
}

.woocommerce-account .nv-page-title-wrap {
    margin-top: 120px;
}

body.woocommerce-account .woocommerce nav .is-active {
    border-color: var(--clr-bg-dark);
}

.woocommerce-MyAccount-content a.button {
    background: #E9DDCE;
    color: var(--clr-bg-dark) !important;
}

.woocommerce-MyAccount-content a.button:hover {
    background: #E9DDCE;
    color: var(--clr-bg-dark) !important;
    opacity: 0.8;
}

.woocommerce .woocommerce-info, .woocommerce-page .woocommerce-info {
    background: #E9DDCE;
    color: var(--clr-bg-dark);
}

body.page-template-shop .ncm-schedule,
body.page-template-shop .ncm-footer {
	clear: both;
	width: 100%;
}

.ncm-container {
	width: 100%;
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0;
	position: relative;
	z-index: 1;
	padding: 0 30px;
}

/* Recurring dark pill CTA — appears in 5 sections */
.ncm-btn-pill {
	font-family: 'Suisse BP Int';
	font-weight: 700;
	line-height: 100%;
	text-align: center;
	background: rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(4px);
	border-radius: 5px;
	color: #FAF6F4 !important;
	display: inline-block;
	transition: all 0.3s;
	padding: 8px 8px 8px 35px !important;
	font-size: 18px;
	display: flex;
	align-items: center;
	gap: 27px;
}

.ncm-btn-pill--dark {
	background-color: var(--clr-bg-dark);
	color: var(--clr-fg-light);
}

.ncm-btn-pill--dark:hover,
.ncm-btn-pill--dark:focus {
	background-color: var(--clr-bg-dark-alt);
	color: var(--clr-fg-light);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(47, 62, 52, 0.25);
}

.ncm-btn-pill--translucent {
	background-color: rgba(0, 0, 0, 0.25);
	color: var(--clr-fg-light);
	padding: 22px 35px;
	font-size: 18px;
}

.ncm-btn-pill--translucent:hover,
.ncm-btn-pill--translucent:focus {
	background-color: rgba(0, 0, 0, 0.5);
	color: #FAF6F4 !important;
}

.ncm-btn-pill__icon {
	/* position: absolute; */
	width: 50px;
	height: 50px;
	right: 8px;
	top: 8px;
	background-color: rgba(0, 0, 0, 0.25);
	/*   backdrop-filter: blur(4px); */
	border-radius: 3px;
	background-image: url('/wp-content/uploads/2026/02/btn-arrow-3b32f4.svg');
	background-repeat: no-repeat;
	background-position: center center;
	min-width: 50px;
}

/* Recurring 2-image product-collage motif — vital_and_to_the, who_this_is_for, a_note_on_aesthetics */
.ncm-collage {
	position: relative;
	width: 100%;
	min-height: 548px;
}

.ncm-collage__primary {
	position: relative;
	z-index: 1;
	width: 100%;
	display: block;
	border-radius: 10px;
	overflow: hidden;
}

.ncm-collage__primary img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	border-radius: 10px;
}

.ncm-collage__secondary {
	position: absolute;
	z-index: 2;
	display: block;
	border-radius: 10px;
	overflow: hidden;
}

.ncm-collage__secondary img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	border-radius: 10px;
}

/* Variant: secondary peeks bottom-left */
.ncm-collage--bottomleft .ncm-collage__secondary {
	bottom: 0;
	left: -90px;
	width: 271px;
}

/* Variant: secondary peeks lower-left of image_2 */
.ncm-collage--lowerleft .ncm-collage__secondary {
	bottom: 60px;
	left: -85px;
	width: 176px;
}

/* Variant: side-by-side aesthetic two image grid */
.ncm-collage--double {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	min-height: auto;
}

.ncm-collage--double .ncm-collage__primary,
.ncm-collage--double .ncm-collage__secondary {
	position: static;
	width: 100%;
}

.ncm-collage--double .ncm-collage__secondary {
	bottom: auto;
	left: auto;
}

/* Flat tint overlay above a photographic background */
.ncm-overlay {
	position: absolute;
	inset: 0;
	/* background: rgba(47, 62, 52, 0.45); */
	background: linear-gradient(180deg, rgba(47, 62, 52, 0.4) 0%, #2F3E34 100%);
	z-index: 1;
	pointer-events: none;
}

.ncm-btn-pill.ncm-btn-pill--dark.ncm-vital__cta.ncm-vital__iconOut {
	padding: 21px 22px 21px 22px !important;
}

/* Tablet */
@media (max-width: 1024px) {
	.ncm-container {
		padding-left: 32px;
		padding-right: 32px;
	}

	.ncm-collage--bottomleft .ncm-collage__secondary,
	.ncm-collage--lowerleft .ncm-collage__secondary {
		left: 0;
		bottom: -60px;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.ncm-container {
		padding-left: 20px;
		padding-right: 20px;
	}

	.ncm-btn-pill {
		font-size: 16px;
		padding: 12px 22px;
	}

	.ncm-btn-pill--translucent {
		padding: 18px 26px;
	}

	.ncm-collage {
		min-height: auto;
	}

	.ncm-collage__secondary {
		position: relative;
		width: 60%;
		margin-top: 16px;
		left: 0;
		bottom: auto;
	}

	.ncm-collage--double {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 500px) {
	.ncm-btn-pill.ncm-btn-pill--dark.ncm-vital__cta.ncm-vital__iconOut {
		padding: 21px 14px 21px 14px !important;
	}
}