/*
 * Harmony: the last stylesheet in the cascade. It pulls every button, heading, form
 * control, focus ring and motion rule that drifted from the design tokens back to
 * them. Nothing here introduces a new look; each value is a token that already
 * exists in the design settings. Audited 2026-09-30 across home, shop, product,
 * subscriptions, referrals, gift shop, rewards, FAQ, cart, account, contact.
 */

/* 1. Buttons from WooCommerce, forms and other plugins: same corner, type and motion as .ccq-btn. */
body :is(
	.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
	.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce-Button, .woocommerce-button,
	.single_add_to_cart_button, .buy_now_button, .checkout-button, #place_order,
	.gform_button, .gform_wrapper .button, .wpcf7-submit, .affwp-form input[type="submit"], .button.wc-forward
):not(.ccq-btn):not([class*="qty"]) {
	border-radius: var(--ccc-radius, 4px);
	font-family: var(--ccc-font-body, sans-serif);
	font-size: var(--ccc-btn-fs-md, 12px);
	font-weight: var(--ccc-weight-button, 600);
	letter-spacing: var(--ccc-caps-spacing, 0.14em);
	line-height: 1;
	text-transform: uppercase;
	min-height: var(--ccc-btn-height, 40px);
	padding-inline: var(--ccc-btn-pad-x, 22px);
	transition: background-color var(--ccc-duration, 250ms) var(--ccc-ease, ease-in-out), color var(--ccc-duration, 250ms) var(--ccc-ease, ease-in-out), border-color var(--ccc-duration, 250ms) var(--ccc-ease, ease-in-out);
}

/*
 * 1b. The checkout call to action, on the same large scale as the product page's.
 *
 * #place_order carries cfw-primary-btn, and CheckoutWC sets its font size,
 * padding and weight from its own Design settings, which are a third admin
 * surface alongside the Customizer and the Charcuteried settings. That is why
 * section 1 above never reached it: this selector is more specific, so it wins.
 *
 * The two buttons that carry a purchase now read the same tokens, so the
 * customer sees one size, one weight and one letter spacing at both ends of the
 * funnel. The padding is zeroed because CheckoutWC's 19px is what made this
 * button 52px tall by accident rather than by design.
 */
body :is(#place_order, #cfw .cfw-primary-btn.cfw-next-tab, #cfw .cfw-primary-btn) {
	min-height: var(--ccc-btn-h-lg, 52px);
	height: var(--ccc-btn-h-lg, 52px);
	padding: 0 var(--ccc-btn-pad-x-lg, 32px) !important;
	font-family: var(--ccc-font-body, sans-serif) !important;
	font-size: var(--ccc-btn-fs-lg, 14px) !important;
	font-weight: var(--ccc-weight-button, 600) !important;
	line-height: 1 !important;
	letter-spacing: var(--ccc-caps-spacing, 0.14em) !important;
	text-transform: uppercase !important;
	border-radius: var(--ccc-radius, 4px) !important;
	width: 100%;
	max-width: 100%;
}

/* 2. Headings: the serif is a light face; some blocks were forcing 500 and 700, which the font fakes. */
body :is(main, #content, .elementor, .site-content) :is(h1, h2, h3, h4):not(.ccq-caps):not(.ccq-sub__subtitle):not(.wll-title) { font-weight: 400; }
body :is(.elementor-accordion .elementor-tab-title, .elementor-toggle .elementor-tab-title) { font-weight: 400; }
body .woocommerce-loop-product__title, body .ccq-card__title { font-weight: 400; }
/* The delivery box label is a small sans label, not a heading; keep it that way. */
body .ccq-delivery :is(h3, h4) { font: var(--ccc-weight-button, 600) var(--ccc-fs-caption, 12px)/1.2 var(--ccc-font-body, sans-serif); letter-spacing: var(--ccc-caps-spacing, 0.14em); text-transform: uppercase; }

/* 3. Form controls: one border, corner and focus. */
body :is(.woocommerce form .input-text, .woocommerce form select, .woocommerce form textarea, .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .wpcf7 textarea, .gform_wrapper input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .gform_wrapper textarea, .gform_wrapper select, .affwp-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .affwp-form textarea) {
	border: 1px solid var(--ccc-border, #d9d9d9);
	border-radius: var(--ccc-radius, 4px);
	font-family: var(--ccc-font-body, sans-serif);
	transition: border-color var(--ccc-duration, 250ms) var(--ccc-ease, ease-in-out), box-shadow var(--ccc-duration, 250ms) var(--ccc-ease, ease-in-out);
}
body :is(.woocommerce form .input-text, .woocommerce form select, .woocommerce form textarea, .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .wpcf7 textarea, .gform_wrapper input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .gform_wrapper textarea, .gform_wrapper select, .affwp-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .affwp-form textarea):focus {
	border-color: var(--ccc-primary, #1e2934);
	box-shadow: 0 0 0 1px var(--ccc-primary, #1e2934);
	outline: none;
}
body :is(.woocommerce-invalid input, .woocommerce-invalid select, .gfield_error input, .gfield_error textarea, .wpcf7-not-valid) { border-color: var(--ccc-danger, #b12535); }

/* 4. Keyboard focus: a visible ring everywhere that has not set its own (:where keeps this the weakest rule). */
:where(a, button, summary, [tabindex="0"], [role="button"]):focus-visible { outline: 2px solid var(--ccc-primary, #1e2934); outline-offset: 2px; }
:where(.site-footer, .ccq-announce, .ccq-hero, [class*="ccq-scheme-navy"]) :where(a, button):focus-visible { outline-color: currentColor; }

/* 5. Motion: everything eases the same way, and nothing moves for people who ask it not to. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* 6. Solid buttons that lived outside .ccq-btn: same rest and hover as the design system (solid navy; on hover, outlined). */
body :is(.ccr-ref .ccr-ref__btn, .mailpoet_form .mailpoet_submit, .mailpoet_form input.mailpoet_submit, #ccc-popup-trigger) {
	display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
	min-height: var(--ccc-btn-height, 40px); padding: 0 var(--ccc-btn-pad-x, 22px);
	border: 1px solid var(--ccc-primary, #1e2934) !important; border-radius: var(--ccc-radius, 4px);
	background: var(--ccc-primary, #1e2934) !important; color: #fff !important;
	font: var(--ccc-weight-button, 600) var(--ccc-btn-fs-md, 12px)/1 var(--ccc-font-body, sans-serif) !important; letter-spacing: var(--ccc-caps-spacing, 0.14em); text-transform: uppercase; text-decoration: none; cursor: pointer;
	transition: background-color var(--ccc-duration, 250ms) var(--ccc-ease, ease-in-out), color var(--ccc-duration, 250ms) var(--ccc-ease, ease-in-out);
}
@media (hover: hover) {
	body :is(.ccr-ref .ccr-ref__btn, .mailpoet_form .mailpoet_submit, .mailpoet_form input.mailpoet_submit, #ccc-popup-trigger):hover { background: transparent !important; color: var(--ccc-primary, #1e2934) !important; }
}
body :is(.ccr-ref .ccr-ref__btn, .mailpoet_form .mailpoet_submit, #ccc-popup-trigger):focus-visible { background: transparent !important; color: var(--ccc-primary, #1e2934) !important; }

/* Shoppable product button on dark video gradient: crisp white with navy text */
body .charcuteried-shoppable__product :is(.button, a.button) {
	display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
	min-height: 38px !important; padding: 0 22px !important;
	border: 1px solid #ffffff !important; border-radius: var(--ccc-radius, 4px) !important;
	background: #ffffff !important; color: var(--ccc-primary, #1e2934) !important;
	font: 700 12px/1 var(--ccc-font-body, sans-serif) !important; letter-spacing: var(--ccc-caps-spacing, 0.14em) !important;
	text-transform: uppercase !important; text-decoration: none !important; cursor: pointer;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3) !important;
	transition: background-color var(--ccc-duration, 250ms) var(--ccc-ease, ease-in-out), color var(--ccc-duration, 250ms) var(--ccc-ease, ease-in-out), transform 200ms ease;
}
@media (hover: hover) {
	body .charcuteried-shoppable__product :is(.button, a.button):hover { background: #f1f5f9 !important; color: #0b1014 !important; border-color: #f1f5f9 !important; transform: translateY(-1px); }
}
body .charcuteried-shoppable__product :is(.button, a.button):focus-visible { background: #f1f5f9 !important; color: #0b1014 !important; border-color: #f1f5f9 !important; }
/* The floating "Join the list" pill and its panel take the site's corner, type and colors instead of the old green. */
body #ccc-popup-trigger { border-radius: var(--ccc-radius-pill, 100px); background: var(--ccc-primary, #1e2934) !important; }
body .ccc-popup-panel { border-radius: var(--ccc-radius-lg, 8px); }
body .ccc-popup-title { font: 400 clamp(24px, 2vw, 30px)/1.15 var(--ccc-font-heading, serif); color: var(--ccc-ink, #0b1014); }
body .ccc-popup-close { color: var(--ccc-text, #515151); transition: color var(--ccc-duration, 250ms) var(--ccc-ease, ease-in-out); }
body .ccc-popup-close:hover { color: var(--ccc-ink, #0b1014); }

/*
 * 7. Icon-only buttons: exact pixel centering and square geometry across all components.
 *
 * The cart trigger is in this list because it is an anchor, not a button, so it
 * never carried the .header-us__icon class and rendered at its natural 38px
 * beside two 44px siblings. All three controls in the header bar now take one
 * size from the button-height token.
 */
body :is(.header-us .header-us__icon, .header-us__search, .header-us .cart-button .action-link) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--ccc-btn-height-mobile, 44px) !important;
	height: var(--ccc-btn-height-mobile, 44px) !important;
	padding: 0 !important;
	line-height: 1 !important;
}
body :is(.header-us .header-us__icon, .header-us__search) :is(i, svg) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--ccc-icon-lg, 20px) !important;
	height: var(--ccc-icon-lg, 20px) !important;
	line-height: 1 !important;
	font-size: var(--ccc-icon-lg, 20px) !important;
	margin: 0 !important;
}
body :is(.header-us .header-us__icon, .header-us__search) i:before {
	margin: 0 !important;
	display: block !important;
	line-height: 1 !important;
}

body :is(.quantity-button, .quantity .quantity-button) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 48px !important;
	height: 48px !important;
	padding: 0 !important;
	line-height: 1 !important;
}
body :is(.quantity-button, .quantity .quantity-button) i {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--ccc-icon-md, 16px) !important;
	height: var(--ccc-icon-md, 16px) !important;
	line-height: 1 !important;
	font-size: var(--ccc-icon-md, 16px) !important;
	margin: 0 !important;
}
body :is(.quantity-button, .quantity .quantity-button) i:before {
	margin: 0 !important;
	display: block !important;
	line-height: 1 !important;
}

/* Cart drawer & CheckoutWC quantity stepper button icon/symbol centering */
body .ccq-cdrawer .ccq-cdrawer__qty button:not(.ccq-cdrawer__remove),
body :is(.cfw-quantity-stepper, #cfw-side-cart .cfw-quantity-stepper) :is(.cfw-quantity-stepper-btn-minus, .cfw-quantity-stepper-btn-plus) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	padding: 0 !important;
	line-height: 1 !important;
	box-sizing: border-box !important;
}
body :is(.cfw-quantity-stepper, #cfw-side-cart .cfw-quantity-stepper) :is(.cfw-quantity-stepper-btn-minus, .cfw-quantity-stepper-btn-plus) svg {
	display: block !important;
	margin: auto !important;
	width: 10px !important;
	height: 10px !important;
}

body :is(.site-close, .ccq-search__close, .ccq-pdp__zoom-btn, .ccq-video-ctrl--play, .ccq-video-ctrl--mute) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
}
body :is(.site-close, .ccq-search__close, .ccq-pdp__zoom-btn, .ccq-video-ctrl--play, .ccq-video-ctrl--mute) :is(i, svg) {
	margin: 0 !important;
	line-height: 1 !important;
}

/* 8. Cart empty page: typography, colors, and button token alignment */
body .cart-empty-page .cart-empty.woocommerce-info,
body .cart-empty-page .cart-empty {
	background: transparent !important;
	border: 0 !important;
	padding: 12px 0 !important;
	margin: 0 0 16px 0 !important;
	color: var(--ccc-ink, #0b1014) !important;
	font-family: var(--ccc-font-heading, "Crimson Text", Georgia, serif) !important;
	font-size: var(--ccc-fs-h2, 24px) !important;
	font-weight: var(--ccc-weight-heading, 400) !important;
	line-height: var(--ccc-lh-h2, 1.2) !important;
	text-transform: none !important;
	text-align: center !important;
}
body .cart-empty-page .return-to-shop {
	text-align: center;
	margin-top: 16px;
}
body .cart-empty-page .return-to-shop a.button {
	background: var(--ccc-primary, #1e2934) !important;
	color: #ffffff !important;
	border: 1px solid var(--ccc-primary, #1e2934) !important;
	border-radius: var(--ccc-radius, 4px) !important;
	padding: 0 var(--ccc-btn-pad-x, 22px) !important;
	min-height: var(--ccc-btn-height, 40px) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font: 600 12px/1 var(--ccc-font-body, sans-serif) !important;
	letter-spacing: var(--ccc-caps-spacing, 0.14em) !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background-color var(--ccc-duration, 250ms) var(--ccc-ease, ease-in-out), color var(--ccc-duration, 250ms) var(--ccc-ease, ease-in-out) !important;
}
@media (hover: hover) {
	body .cart-empty-page .return-to-shop a.button:hover {
		background: transparent !important;
		color: var(--ccc-primary, #1e2934) !important;
	}
}

:is(.ccd-calendar, .flatpickr-calendar, .ui-datepicker, [data-calendar], .date-picker-wrap, .datepicker-wrap, .wp-block-calendar, .widget_calendar) {
	display: block !important;
	width: 100% !important;
	max-width: 340px !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
	font-family: var(--ccc-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
	color: var(--ccc-ink, #0b1014) !important;
}
:is(.ccq-checkout-calendar-wrap .ccd-calendar, .ccd-calendar--full-width, .ccq-calendar--full-width) {
	max-width: 100% !important;
	width: 100% !important;
	margin: 12px 0 0 0 !important;
}
:is(.ccd-calendar__head, .flatpickr-months, .ui-datepicker-header) {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: 12px !important;
	position: relative !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
}
:is(.ccd-calendar__title, .flatpickr-current-month, .ui-datepicker-title, .wp-block-calendar caption) {
	margin: 0 auto !important;
	font: 400 18px/1.2 var(--ccc-font-heading, "Crimson Text", Georgia, serif) !important;
	color: var(--ccc-ink, #0b1014) !important;
	text-align: center !important;
	text-transform: capitalize !important;
}
:is(.ccd-calendar__nav, button.ccd-calendar__nav, .ccq-delivery .ccd-calendar__nav.ccd-calendar__nav, .flatpickr-prev-month, .flatpickr-next-month, .ui-datepicker-prev, .ui-datepicker-next) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	min-height: 34px !important;
	border: 1px solid var(--ccc-border, #d9d9d9) !important;
	border-radius: 50% !important;
	background: var(--ccc-page, #fff) !important;
	color: var(--ccc-ink, #0b1014) !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	line-height: 1 !important;
	text-decoration: none !important;
	position: static !important;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease !important;
}
:is(.ccd-calendar__nav, button.ccd-calendar__nav, .flatpickr-prev-month, .flatpickr-next-month, .ui-datepicker-prev, .ui-datepicker-next) svg {
	display: block !important;
	width: 15px !important;
	height: 15px !important;
	stroke: currentColor !important;
	pointer-events: none !important;
}
@media (hover: hover) {
	:is(.ccd-calendar__nav:hover:not(:disabled), button.ccd-calendar__nav:hover:not(:disabled), .flatpickr-prev-month:hover, .flatpickr-next-month:hover, .ui-datepicker-prev:hover, .ui-datepicker-next:hover) {
		border-color: var(--ccc-primary, #1e2934) !important;
		background: var(--ccc-cream, #f2f1eb) !important;
		color: var(--ccc-ink, #0b1014) !important;
	}
}
:is(button.ccd-calendar__nav:disabled, .ccd-calendar__nav:disabled, .ccq-delivery .ccd-calendar__nav.ccd-calendar__nav:disabled, .flatpickr-disabled, .ui-datepicker-prev.ui-state-disabled, .ui-datepicker-next.ui-state-disabled) {
	opacity: 0.3 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}
:is(.ccd-calendar__weekdays, .flatpickr-weekdays, .ui-datepicker-calendar thead tr) {
	display: grid !important;
	grid-template-columns: repeat(7, 1fr) !important;
	gap: 6px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	border: none !important;
}
:is(.ccd-calendar__weekdays span, span.flatpickr-weekday, .ui-datepicker-calendar th, .wp-block-calendar th) {
	text-align: center !important;
	font: 600 11px/1 var(--ccc-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
	text-transform: uppercase !important;
	color: var(--ccc-text, #515151) !important;
	padding: 6px 0 !important;
	letter-spacing: 0.05em !important;
	border: none !important;
}
:is(.ccd-calendar__grid, .flatpickr-days, .dayContainer, .ui-datepicker-calendar tbody) {
	display: grid !important;
	grid-template-columns: repeat(7, 1fr) !important;
	gap: 6px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
.ui-datepicker-calendar tr {
	display: contents !important;
}
:is(
	.ccd-calendar__cell,
	button.ccd-calendar__cell,
	.ccq-delivery .ccd-calendar__cell.ccd-calendar__cell,
	.flatpickr-day,
	.ui-datepicker-calendar td a,
	.ui-datepicker-calendar td span
) {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	aspect-ratio: 1 !important;
	min-height: 40px !important;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	border: 1px solid var(--ccc-border, #e0e0e0) !important;
	border-radius: var(--ccc-radius, 6px) !important;
	background: var(--ccc-page, #fff) !important;
	color: var(--ccc-ink, #0b1014) !important;
	font: 600 13px/1.2 var(--ccc-font-body, sans-serif) !important;
	cursor: pointer !important;
	padding: 2px !important;
	margin: 0 !important;
	box-shadow: none !important;
	text-decoration: none !important;
	transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease !important;
}
.ccd-calendar__day-num {
	display: block !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
}
:is(
	.ccd-calendar__cell--blank,
	.ccq-delivery .ccd-calendar__cell--blank,
	.ccq-delivery .ccd-calendar__cell.ccd-calendar__cell--blank,
	span.ccd-calendar__cell--blank,
	button.ccd-calendar__cell--blank
) {
	cursor: default !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	pointer-events: none !important;
}
@media (hover: hover) {
	:is(
		button.ccd-calendar__cell:not(:disabled):not(.is-unavailable):hover,
		.ccd-calendar__cell:not(:disabled):not(.is-unavailable):hover,
		.flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):hover,
		.ui-datepicker-calendar td a:hover
	) {
		border-color: var(--ccc-primary, #1e2934) !important;
		background: #f0f4f8 !important;
	}
}
:is(
	.ccd-calendar__cell.is-unavailable,
	.ccd-calendar__cell:disabled,
	.ccq-delivery .ccd-calendar__cell.ccd-calendar__cell.is-unavailable,
	.ccq-delivery .ccd-calendar__cell.ccd-calendar__cell:disabled,
	.flatpickr-day.flatpickr-disabled,
	.flatpickr-day.prevMonthDay,
	.flatpickr-day.nextMonthDay,
	.ui-datepicker-calendar td.ui-state-disabled span
) {
	color: var(--ccc-slate, #bdc2bf) !important;
	background: #f8f8f8 !important;
	cursor: not-allowed !important;
	text-decoration: line-through !important;
	border-color: #ededed !important;
}
:is(
	.ccd-calendar__cell.is-chosen,
	button.ccd-calendar__cell.is-chosen,
	.ccd-calendar__cell[aria-pressed="true"],
	.ccq-delivery .ccd-calendar__cell.ccd-calendar__cell.is-chosen,
	.flatpickr-day.selected,
	.flatpickr-day.startRange,
	.flatpickr-day.endRange,
	.ui-datepicker-calendar td.ui-datepicker-current-day a,
	.ui-datepicker-calendar td .ui-state-active
) {
	background: var(--ccc-primary, #1e2934) !important;
	border-color: var(--ccc-primary, #1e2934) !important;
	color: var(--ccc-page, #fff) !important;
}
:is(.ccd-calendar__cell.is-today, .ccq-delivery .ccd-calendar__cell.ccd-calendar__cell.is-today, .flatpickr-day.today, .ui-datepicker-calendar td.ui-datepicker-today a) {
	border-color: var(--ccc-border, #d9d9d9) !important;
}
:is(.ccd-calendar__cell.is-chosen.is-today, .ccq-delivery .ccd-calendar__cell.ccd-calendar__cell.is-chosen.is-today, .flatpickr-day.selected.today) {
	border-color: var(--ccc-primary, #1e2934) !important;
}
.ccd-calendar__premium,
.ccd-calendar__premium-spacer {
	display: block !important;
	font-size: 9px !important;
	font-weight: 700 !important;
	height: 11px !important;
	line-height: 11px !important;
	margin-top: 1px !important;
	white-space: nowrap !important;
}
.ccd-calendar__premium {
	color: var(--ccc-sale, #ac2c21) !important;
}
.ccd-calendar__premium-spacer {
	visibility: hidden !important;
	pointer-events: none !important;
}
.is-chosen .ccd-calendar__premium,
.ccd-calendar__cell[aria-pressed="true"] .ccd-calendar__premium {
	color: inherit !important;
}
.ccd-calendar__legend {
	margin: 16px 0 0 !important;
	font-size: 11px !important;
	color: var(--ccc-text, #515151) !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 16px !important;
	justify-content: center !important;
	line-height: 1.4 !important;
}
.ccd-calendar__key {
	display: inline-flex !important;
	align-items: center !important;
}
.ccd-calendar__key--premium {
	color: var(--ccc-sale, #ac2c21) !important;
	font-weight: 600 !important;
}
.ccd-checkout-dates {
	background: var(--ccc-page, #fff) !important;
	border: 1px solid var(--ccc-border, #d9d9d9) !important;
	border-radius: var(--ccc-radius-lg, 8px) !important;
	padding: 24px !important;
	margin-bottom: 24px !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

/* Universal date input styling */
input[type="date"] {
	font-family: var(--ccc-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
	height: var(--ccc-btn-height, 44px) !important;
	border: 1px solid var(--ccc-border, #d9d9d9) !important;
	border-radius: var(--ccc-radius, 4px) !important;
	padding: 0 14px !important;
	color: var(--ccc-ink, #0b1014) !important;
	background-color: var(--ccc-page, #ffffff) !important;
	font-size: 14px !important;
	transition: border-color var(--ccc-duration, 250ms) var(--ccc-ease, ease-in-out), box-shadow var(--ccc-duration, 250ms) var(--ccc-ease, ease-in-out) !important;
}

input[type="date"]:focus {
	border-color: var(--ccc-primary, #1e2934) !important;
	outline: none !important;
	box-shadow: 0 0 0 1px var(--ccc-primary, #1e2934) !important;
}

/* Calendar popover wrapper matching UrbanStems */
:is(.ccq-delivery__pop, .ccq-cbar__date-pop, .flatpickr-calendar) {
	background: var(--ccc-page, #ffffff) !important;
	border: 1px solid var(--ccc-border, #d9d9d9) !important;
	border-radius: var(--ccc-radius-lg, 8px) !important;
	box-shadow: var(--ccc-shadow, 0 4px 20px rgba(0, 0, 0, 0.08)) !important;
	padding: 20px !important;
	box-sizing: border-box !important;
}

:is(.ccq-delivery__pophead) {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding-bottom: 12px !important;
	margin-bottom: 12px !important;
	border-bottom: 1px solid var(--ccc-border, #ebebeb) !important;
}

:is(.ccq-delivery__pophead) .ccq-caps {
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	color: var(--ccc-ink, #0b1014) !important;
}

:is(.ccq-delivery__x) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
	background: transparent !important;
	border: none !important;
	cursor: pointer !important;
	color: var(--ccc-text, #515151) !important;
	transition: color 150ms ease, background-color 150ms ease !important;
}

:is(.ccq-delivery__x):hover {
	color: var(--ccc-ink, #0b1014) !important;
	background: var(--ccc-cream, #f2f1eb) !important;
}

/* 10. Responsive layout containment: zero horizontal overflow across 320px–1920px */
.charcuteried-shoppable .slick-list,
.elementor-widget-charcuteried-shoppable-video {
	overflow: hidden !important;
	max-width: 100vw !important;
}

@media (max-width: 374px) {
	.header-us__logo img {
		width: 135px !important;
		max-width: 50vw !important;
	}
	.header-us__bar {
		padding-inline: 10px !important;
		gap: 6px !important;
	}
}

/* 11. Footer cities disclosure: clean single chevron with zero stray pseudo-elements */
body .footer-us .footer-us__cities > summary::before {
	content: none !important;
	display: none !important;
}
body .footer-us .footer-us__cities > summary::after {
	content: "" !important;
	display: inline-block !important;
	width: 7px !important;
	height: 7px !important;
	border: none !important;
	border-right: 1.5px solid currentColor !important;
	border-top: 1.5px solid currentColor !important;
	transform: rotate(45deg) !important;
	margin: 0 0 0 10px !important;
	position: static !important;
	flex: 0 0 auto !important;
	align-self: center !important;
	background: none !important;
	transition: transform 250ms var(--ccc-ease, ease-in-out) !important;
}
body .footer-us .footer-us__cities[open] > summary::after {
	transform: rotate(135deg) !important;
}

/* 12. Referral link copy button: consistent 20px centered icon matching theme design tokens */
body .ccr-ref__link .ccr-ref__copy,
body button.ccr-ref__copy {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--ccc-ink, #0b1014) !important;
	box-shadow: none !important;
	border-radius: 0 var(--ccc-radius, 4px) var(--ccc-radius, 4px) 0 !important;
	cursor: pointer !important;
	line-height: 1 !important;
}
body .ccr-ref__link .ccr-ref__copy:hover,
body button.ccr-ref__copy:hover {
	background: transparent !important;
	color: var(--ccc-primary, #1e2934) !important;
	opacity: 0.8 !important;
}
body .ccr-ref__link .ccr-ref__copy svg,
body button.ccr-ref__copy svg {
	display: block !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	min-height: 20px !important;
	stroke: currentColor !important;
	stroke-width: 1.8 !important;
	margin: auto !important;
}

/* 13. Unified Modal, Drawer & Overlay Close Buttons
   Consistent square tokenized close buttons (40x40, 4px radius, transparent ghost bg, ink color, centered 20px SVG icon).
   Eliminates all circular, rectangular, or mismatched dark-colored close buttons across all components. */
body :is(
	.site-close,
	.ccq-search__close,
	.ccq-cdrawer__close,
	.ccq-drawer__close,
	.ccc-popup-close,
	.ccq-delivery__x,
	.ccb-egift-close,
	#commercekit-waitlist-close,
	.ckit-modal--button_close,
	.ckgit-stock-modal__close,
	.cart-side-close,
	.charcuteried-rp-close,
	.ccq-notice-close,
	.ccq-site-newsletter .newsletter-close,
	.klb-newsletter-popup .site-close,
	.klb-modal-root .site-close,
	.ccg-preview__close
),
body button:is(
	.site-close,
	.ccq-search__close,
	.ccq-cdrawer__close,
	.ccq-drawer__close,
	.ccc-popup-close,
	.ccq-delivery__x,
	.ccb-egift-close,
	#commercekit-waitlist-close,
	.ckit-modal--button_close,
	.ckgit-stock-modal__close,
	.cart-side-close,
	.charcuteried-rp-close,
	.ccq-notice-close,
	.ccg-preview__close
) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--ccc-btn-h-md, 40px) !important;
	height: var(--ccc-btn-h-md, 40px) !important;
	min-width: var(--ccc-btn-h-md, 40px) !important;
	min-height: var(--ccc-btn-h-md, 40px) !important;
	max-width: var(--ccc-btn-h-md, 40px) !important;
	max-height: var(--ccc-btn-h-md, 40px) !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid transparent !important;
	border-radius: var(--ccc-radius, 4px) !important;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--ccc-ink, #0b1014) !important;
	box-shadow: none !important;
	cursor: pointer !important;
	line-height: 1 !important;
	box-sizing: border-box !important;
	text-decoration: none !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-size: 22px !important;
	font-weight: 300 !important;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease !important;
}

body :is(
	.site-close,
	.ccq-search__close,
	.ccq-cdrawer__close,
	.ccq-drawer__close,
	.ccc-popup-close,
	.ccq-delivery__x,
	.ccb-egift-close,
	#commercekit-waitlist-close,
	.ckit-modal--button_close,
	.ckgit-stock-modal__close,
	.cart-side-close,
	.charcuteried-rp-close,
	.ccq-notice-close,
	.ccq-site-newsletter .newsletter-close,
	.klb-newsletter-popup .site-close,
	.klb-modal-root .site-close,
	.ccg-preview__close
):hover {
	background: rgba(11, 16, 20, 0.06) !important;
	background-color: rgba(11, 16, 20, 0.06) !important;
	color: var(--ccc-primary, #1e2934) !important;
	border-color: transparent !important;
	transform: none !important;
}

body :is(
	.site-close,
	.ccq-search__close,
	.ccq-cdrawer__close,
	.ccq-drawer__close,
	.ccc-popup-close,
	.ccq-delivery__x,
	.ccb-egift-close,
	#commercekit-waitlist-close,
	.ckit-modal--button_close,
	.ckgit-stock-modal__close,
	.cart-side-close,
	.charcuteried-rp-close,
	.ccq-notice-close,
	.ccq-site-newsletter .newsletter-close,
	.klb-newsletter-popup .site-close,
	.klb-modal-root .site-close,
	.ccg-preview__close
):active {
	background: rgba(11, 16, 20, 0.12) !important;
	background-color: rgba(11, 16, 20, 0.12) !important;
}

body :is(
	.site-close,
	.ccq-search__close,
	.ccq-cdrawer__close,
	.ccq-drawer__close,
	.ccc-popup-close,
	.ccq-delivery__x,
	.ccb-egift-close,
	#commercekit-waitlist-close,
	.ckit-modal--button_close,
	.ckgit-stock-modal__close,
	.cart-side-close,
	.charcuteried-rp-close,
	.ccq-notice-close,
	.ccq-site-newsletter .newsletter-close,
	.klb-newsletter-popup .site-close,
	.klb-modal-root .site-close,
	.ccg-preview__close
) :is(svg, i) {
	display: block !important;
	width: var(--ccc-icon-lg, 20px) !important;
	height: var(--ccc-icon-lg, 20px) !important;
	min-width: var(--ccc-icon-lg, 20px) !important;
	min-height: var(--ccc-icon-lg, 20px) !important;
	max-width: var(--ccc-icon-lg, 20px) !important;
	max-height: var(--ccc-icon-lg, 20px) !important;
	stroke: currentColor !important;
	stroke-width: 1.8 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
	margin: auto !important;
	line-height: 1 !important;
	pointer-events: none !important;
}