/* Quiz modal */
.fanfari-quiz-dialog {
	width: min(680px, 92vw);
	height: min(720px, 88vh);
	padding: 0;
	border: none;
	border-radius: 14px;
	overflow: hidden;
}

.fanfari-quiz-dialog::backdrop {
	background: rgba(0, 0, 0, 0.55);
}

.fanfari-quiz-dialog iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.fanfari-quiz-close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 1;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

/* Product Collection carousel: WooCommerce's carousel CSS (scroll snap,
   per-breakpoint min-widths) expects a flex row, which the editor normally
   adds as a layout attribute; supply it here for template-authored markup. */
.fanfari-carousel {
	position: relative;
}

.fanfari-carousel .is-product-collection-layout-carousel {
	display: flex;
	flex-wrap: nowrap;
	gap: 1rem;
}

/* flow layout gives every sibling but the first a top margin — that is what
   made the first card look "raised" */
.fanfari-carousel .is-product-collection-layout-carousel > * {
	margin-block-start: 0 !important;
}

/* product names inherit the section's (light) text color */
.wc-block-product-template .wp-block-post-title a {
	color: inherit;
}

/* hover arrows added by fanfari-blocks front.js */
.fanfari-carousel__prev,
.fanfari-carousel__next {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	border: none;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s;
	z-index: 2;
}

.fanfari-carousel__prev { left: -8px; }
.fanfari-carousel__next { right: -8px; }

.fanfari-carousel:hover .fanfari-carousel__prev,
.fanfari-carousel:hover .fanfari-carousel__next {
	opacity: 1;
}

/* Shopify sections sit flush against each other: the theme's root block gap
   must not separate full-width sections inside post content */
.wp-block-post-content > .alignfull {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* footer utility links keep the footer's muted cream, not the global link color */
footer.wp-block-group a {
	color: inherit;
}

/* the root block gap also puts a margin above the footer — content should
   sit flush against it */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* ---------- products listing: Shopify-style cards ---------- */
.fanfari-plp .wc-block-product {
	background: var(--wp--preset--color--soft-gray);
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.fanfari-plp .fanfari-card__cat {
	padding: 14px 18px 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--dark-green);
}

.fanfari-plp .fanfari-card__cat a {
	color: inherit;
	text-decoration: none;
}

.fanfari-plp .wc-block-components-product-image {
	margin: 10px 16px;
}

.fanfari-plp .wc-block-components-product-image img {
	height: 215px;
	object-fit: contain !important;
}

.fanfari-plp .wp-block-woocommerce-product-price {
	padding: 0 18px 12px;
}

/* dark band with the name + one-line subtitle, pinned to the card bottom */
.fanfari-plp .fanfari-card__footer {
	margin-top: auto;
	background: var(--wp--preset--color--dark-green);
	color: var(--wp--preset--color--cream);
	padding: 12px 18px 14px;
}

.fanfari-plp .fanfari-card__footer .wp-block-post-title {
	font-size: 1.25rem;
	margin: 0;
}

.fanfari-plp .fanfari-card__footer .wp-block-post-excerpt {
	margin: 0;
}

.fanfari-plp .fanfari-card__footer .wp-block-post-excerpt__excerpt {
	font-size: 0.8125rem;
	opacity: 0.85;
	margin: 4px 0 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* filters: no UA fieldset box (the "black border"), Shopify-style checkboxes */
.wc-block-product-filters fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

.wc-block-product-filters {
	--wc-product-filter-checkbox-list-option-element: #fff;
	--wc-product-filter-checkbox-list-option-element-border: #b9bda4;
	--wc-product-filter-checkbox-list-option-element-selected: var(--wp--preset--color--cream);
}

.wc-block-product-filters .wc-block-product-filter-checkbox-list__input-wrapper::before {
	display: none;
}

.wc-block-product-filters input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked {
	background: var(--wp--preset--color--dark-green);
	border-color: var(--wp--preset--color--dark-green);
}

/* quiz strip sits flush between content and footer; text wraps beside the
   button as on Shopify */
.wp-site-blocks > .fanfari-quiz-strip {
	margin-block-start: 0;
}

.fanfari-quiz-strip p {
	max-width: 28em;
}

/* Contact form (Contact Form 7): the Shopify contact page look — centered
   680px column, cream fields with olive border, placeholder labels, dark
   green full-width submit. Field labels stay in the DOM for screen readers. */
.wpcf7 {
	max-width: 680px;
	margin-inline: auto;
}

.wpcf7 form {
	display: grid;
	gap: 14px;
}

.wpcf7 form p {
	margin: 0;
}

.wpcf7 form label br {
	display: none;
}

.fanfari-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

/* CF7's autop wraps both row fields in one <p> with a <br> between them;
   make the <p> transparent to the grid and drop the <br> so the two labels
   become the grid items */
.fanfari-form-row > p {
	display: contents;
}

.fanfari-form-row br {
	display: none;
}

@media (max-width: 600px) {
	.fanfari-form-row {
		grid-template-columns: 1fr;
	}
}

.wpcf7 .wpcf7-form-control-wrap {
	display: block;
}

.wpcf7 input:not([type="submit"]),
.wpcf7 textarea {
	width: 100%;
	font: inherit;
	color: var(--wp--preset--color--olive);
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--olive);
	border-radius: 4px;
	padding: 16px 20px;
	box-sizing: border-box;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
	color: var(--wp--preset--color--olive);
	opacity: 1;
}

.wpcf7 input:focus-visible,
.wpcf7 textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--dark-green);
	outline-offset: -1px;
}

.wpcf7 textarea {
	min-height: 258px;
	resize: vertical;
}

.wpcf7 input[type="submit"] {
	width: 100%;
	font: inherit;
	font-weight: 700;
	color: var(--wp--preset--color--cream);
	background: var(--wp--preset--color--dark-green);
	border: none;
	border-radius: 14px;
	padding: 16px 24px;
	cursor: pointer;
}

.wpcf7 input[type="submit"]:hover {
	background: var(--wp--preset--color--moss);
}

.wpcf7 .wpcf7-not-valid-tip {
	font-size: 0.875rem;
	margin-top: 4px;
}

.wpcf7 .wpcf7-response-output {
	margin: 0;
	padding: 12px 20px;
	border-radius: 4px;
}

/* map-pin bullet before the contact-page address line (same icon as Shopify) */
.fanfari-address::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 10px;
	vertical-align: -4px;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23374410'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200Z'/%3E%3Ccircle%20cx='12'%20cy='10'%20r='3'/%3E%3C/svg%3E") center/contain no-repeat;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* product benefit columns: icons differ in intrinsic size and texts wrap to
   different line counts — pin every icon to the bottom of a fixed-height box
   so icons and texts start on the same line across columns */
.fanfari-benefits .wp-block-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

.fanfari-benefits .wp-block-column .wp-block-image {
	height: 84px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin: 0 0 0.75rem;
}

.fanfari-benefits .wp-block-column .wp-block-image img {
	max-height: 72px;
	width: auto;
}