/*
Theme Name:   Charcuteried Child
 Theme URI:    https://launchengineers.com
 Description:  Charcuteried Child Theme
 Author:       Launchengineers
 Author URI:   https://launchengineers.com
 Template:     charcuteried
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  charcuteried-child
*/
/*
 * The tokens.
 *
 * This stylesheet used to define --ccc-* values of its own. It does not any more,
 * because charcuteried-core/inc/design/design.php already turns Charcuteried > Design
 * settings into the same properties and prints them last in <head>, so any duplicate
 * declared here lost on source order and was dead code that looked live.
 *
 * Two --ccc-space-* callers are still reading a value, but they read the numbers the
 * plugin now owns. The old scale was 8/16/24/32/48 and the new one is 4/8/12/16/24/
 * 32/48/64/96, so the eleven readers below were remapped to the same physical sizes.
 *
 * If the plugin is deactivated, components.css still carries a literal fallback in
 * every var() call, which is why removing this block cannot leave a page blank.
 */


/*
 * The account and content-page button.
 *
 * This class was defined twice, in account.css and content-pages.css, with
 * different geometry: 48px tall with weight 600 in one, no fixed height with
 * weight 700 and 28px of padding in the other. Both stylesheets are loaded
 * conditionally, so which geometry a visitor got depended on the enqueue order
 * rather than on anything a developer could look up. It now lives here, in the
 * sheet every page loads, and reads the canonical medium button scale.
 *
 * .ccq-btn is the same component with the plugin's class name. The two share
 * tokens, so they cannot drift apart again without the tokens drifting too.
 */
.us-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--ccc-btn-height-mobile, 44px);
	padding: 0 var(--ccc-btn-pad-x, 22px);
	border: 1px solid var(--ccc-primary, #1e2934);
	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;
	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),
		border-color var(--ccc-duration, 250ms) var(--ccc-ease, ease-in-out);
}
@media (min-width: 1024px) {
	.us-btn { min-height: var(--ccc-btn-height, 40px); }
}

/*
 * The class is repeated because the parent theme styles every <button> with
 * rules as strong as button:not(.unset):not(.link), which is (0,2,1) and beats a
 * single class. Three classes beat it without !important. This is the same
 * trick components.css uses for the same reason, and without it the account
 * page's login submit rendered #e6e8eb grey instead of the primary navy.
 */
.us-btn.us-btn.us-btn--solid { background: var(--ccc-primary, #1e2934); color: var(--ccc-text-inverse, #ffffff); }
.us-btn.us-btn.us-btn--solid > * { color: inherit; }
@media (hover: hover) {
	.us-btn.us-btn.us-btn--solid:hover { background: transparent; color: var(--ccc-primary, #1e2934); }
	.us-btn.us-btn.us-btn--solid:hover > * { color: inherit; }
}

.us-btn--outline { background: transparent; color: var(--ccc-primary, #1e2934); }
@media (hover: hover) {
	.us-btn--outline:hover { background: var(--ccc-primary, #1e2934); color: var(--ccc-text-inverse, #ffffff); }
}

.us-btn--full { width: 100%; }

.us-btn--sm {
	min-height: var(--ccc-btn-h-sm, 32px);
	padding: 0 var(--ccc-btn-pad-x-sm, 16px);
	font-size: var(--ccc-btn-fs-sm, 11px);
}

.us-btn:focus-visible { outline: none; box-shadow: var(--ccc-focus, 0 0 0 1px var(--ccc-primary)); }

/*
 * Reduced motion.
 *
 * A transition is decoration, and decoration that moves without being asked
 * for is the thing this setting exists to stop. The marquee and the spinner
 * are named explicitly because stopping a transition is not the same as
 * stopping an animation.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.charcuteried-marquee__track,
	.ccr-marquee,
	.charcuteried-shoppable__play {
		animation: none !important;
	}
}

/*
 * A visible focus ring on anything interactive that the theme does not
 * already style, so the site is not navigable by keyboard without one.
 */
.ccc-surface :focus-visible,
.ccr-landing :focus-visible,
.ccg-redeem :focus-visible {
	outline: none;
	box-shadow: var(--ccc-focus);
	border-radius: var(--ccc-radius-sm);
}

body {
	background-color: var(--ccc-page, var(--ccc-cream));
	color: var(--ccc-text, var(--ccc-ink));
}

/* The footer bottom bar: the copyright, then the three legal links. */
.ccc-footer-legal {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0 18px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.ccc-footer-legal a {
	text-decoration: underline;
}

/*
 * The preorder bar, rendered by charcuteried-delivery while a preorder is in the
 * cart. Its background comes from the preorder_color setting, inline; this block
 * only provides the layout.
 */
.ccd-preorder-bar {
	width: 100%;
	font-size: 14px;
	line-height: 1.4;
}

.ccd-preorder-bar__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 16px;
	padding: 8px 16px;
	margin: 0 auto;
	max-width: 1170px;
	text-align: center;
}

.ccd-preorder-bar__headline {
	font-weight: 600;
}

/*
 * WPLoyalty points message alignment:
 * Remove all inline/inherited left padding and margins so the loyalty points text
 * aligns flush on the exact same x margin as the product title and price.
 */
.wlr-product-message,
.product-buttons .wlr-product-message,
.product .wlr-product-message,
.content-wrapper .wlr-product-message {
	display: block !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	text-align: left !important;
}

.product-buttons .wlr-product-message {
	flex: 0 0 100%;
	width: 100%;
	margin: 0 0 var(--ccc-space-2);
	font-size: 0.8125rem;
	color: rgb(38 38 38 / 70%);
}
.product-buttons:has(.wlr-product-message) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--ccc-space-2);
}
.product-buttons:has(.wlr-product-message) > a,
.product-buttons:has(.wlr-product-message) > .button {
	width: 100%;
	text-align: center;
	box-sizing: border-box;
}

/*
 * Product grid equal card heights and uniform inline action buttons:
 * Regardless of title length (1 line vs multiple lines), make the cards equal height
 * and push the "Select options" / "Add to cart" buttons to the bottom of the card,
 * aligning all buttons in a horizontal row across the grid.
 */
.products .product,
ul.products li.product,
.products-grid .product,
.module-products-grid .product,
li.product.type-product,
.products .product.type-product {
	display: flex !important;
	flex-direction: column !important;
	height: auto !important;
	align-self: stretch !important;
}

.products .product .product-wrapper,
.products .product .product-inner,
.product-wrapper,
.product-inner {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	height: 100% !important;
}

.products .product .content-wrapper,
.product-wrapper .content-wrapper {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
}

.products .product .product-buttons,
.products .product .product-footer,
.products .product .product-cart-wrapper,
.products .product .wd-add-btn,
.product-wrapper .product-buttons,
.product-wrapper .product-footer,
.product-wrapper .product-cart-wrapper,
.product-wrapper .wd-add-btn {
	display: block !important;
	height: auto !important;
	margin-top: auto !important;
	margin-bottom: 0 !important;
	width: 100% !important;
}

.products .product .product-buttons > a,
.products .product .product-buttons > .button,
.product-wrapper .product-buttons > a,
.product-wrapper .product-buttons > .button {
	display: inline-flex !important;
	position: static !important;
	width: 100% !important;
	text-align: center !important;
	box-sizing: border-box !important;
}

.products .product .product-title,
.product-wrapper .product-title {
	margin-bottom: var(--ccc-space-2) !important;
}

.products .product .price,
.product-wrapper .price {
	margin-bottom: var(--ccc-space-2) !important;
}

.ccq-card {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
}

.ccq-card__sizes,
.ccq-card__actions {
	margin-top: auto !important;
}

/*
 * Mega menu panels. The panel is full width by design; its contents are held
 * to the site's content width so a wide screen does not stretch them, and a
 * clip in a panel is a short banner, not a 16:9 block.
 */
.ccq-menu .mega-menu-elementor .charcuteried-elementor-template {
	max-width: 75rem;
	margin: 0 auto;
	padding: var(--ccc-space-5) var(--ccc-space-4);
	box-sizing: border-box;
}
.ccq-menu .mega-menu-elementor .charcuteried-elementor-template .elementor-widget-video .elementor-wrapper {
	max-height: 14rem;
	overflow: hidden;
}
.ccq-menu .mega-menu-elementor .charcuteried-elementor-template h3,
.ccq-menu .mega-menu-elementor .charcuteried-elementor-template h4 {
	margin: 0 0 var(--ccc-space-2);
	font-family: var(--theme-heading-font, inherit);
}
.ccq-menu .mega-menu-elementor .charcuteried-elementor-template p {
	margin: 0 0 var(--ccc-space-2);
}
.ccq-menu .mega-menu-elementor .charcuteried-elementor-template .elementor-widget-button {
	margin-bottom: var(--ccc-space-2);
}
.ccq-menu .mega-menu-elementor .ccc-mega-list { list-style: none; margin: 0 0 var(--ccc-space-4); padding: 0; columns: 2; }
.ccq-menu .mega-menu-elementor .ccc-mega-list li { margin: 0 0 var(--ccc-space-2); break-inside: avoid; }
.ccq-menu .mega-menu-elementor .elementor-button .elementor-button-text { color: var(--ccc-cream); }

/* Sliders and hidden mega panels are wider than the viewport by design. Clip
 * them at the page, so the page itself never scrolls sideways. `clip`, not
 * `hidden`, so a sticky header keeps working. */
body {
	overflow-x: clip;
}

/* The single-product gallery is a row of slides wider than the column. The
 * gift card product has one slide and never gets the theme's slider wrapper,
 * so the row spilled past the viewport. Clip it at the gallery. */
.woocommerce-product-gallery {
	overflow: hidden;
}

/* The missing-page illustration is a fixed-width image and overflowed phones. */
.page-error .page-not-found img {
	max-width: min(420px, 100%);
	height: auto;
}

/*
 * Rewards floating widget:
 * Keep below modals, drawers, and header dropdowns so it never overlaps filter options or buttons.
 */
#wll-site-launcher,
.wll_main_container,
.wll-launcher-button-container,
div[id*="wlr-floating"],
div[class*="wlr-floating"] {
	z-index: 900 !important;
}

body.ccq-drawer-open #wll-site-launcher,
body.ccq-drawer-open .wll_main_container,
body.ccq-drawer-open .wll-launcher-button-container,
body.ccq-drawer-open div[id*="wlr-floating"],
body.ccq-drawer-open div[class*="wlr-floating"],
body.modal-open #wll-site-launcher,
body.modal-open .wll_main_container,
body.modal-open .wll-launcher-button-container {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* ==========================================================================
   Unified Delivery Calendar & Date Picker System
   Enforces identical look-and-feel across all calendars:
   - Catalog Filter Bar Popover
   - Single Product Page (PDP) Delivery Picker
   - Checkout Page Delivery Calendar
   - e-Gift Redemption Calendar
   - Event Booking & Cart date inputs
   - Third-party & Future plugins (Flatpickr, jQuery UI, WordPress blocks)
   ========================================================================== */

:is(.ccd-calendar, .flatpickr-calendar, .ui-datepicker, [data-calendar], .date-picker-wrap, .datepicker-wrap, .wp-block-calendar, .widget_calendar) {
	display: block;
	width: 100%;
	max-width: 340px;
	margin: 0 auto;
	box-sizing: border-box;
	font-family: var(--ccc-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	color: var(--ccc-ink, #0b1014);
}

:is(.ccd-calendar__head, .flatpickr-months, .ui-datepicker-header) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	position: relative;
	background: transparent;
	border: none;
	padding: 0;
}

:is(.ccd-calendar__title, .flatpickr-current-month, .ui-datepicker-title, .wp-block-calendar caption) {
	margin: 0 auto;
	font: 400 18px/1.2 var(--ccc-font-heading, "Crimson Text", Georgia, serif);
	color: var(--ccc-ink, #0b1014);
	text-align: center;
	text-transform: capitalize;
}

: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, #f8f8f8) !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;
}

:is(.ccd-calendar__nav, button.ccd-calendar__nav, .flatpickr-prev-month, .flatpickr-next-month, .ui-datepicker-prev, .ui-datepicker-next) svg {
	display: block;
	width: 15px;
	height: 15px;
	stroke: currentColor;
	pointer-events: none;
}

@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;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	width: 100%;
	box-sizing: border-box;
	border: none;
}

:is(.ccd-calendar__weekdays span, span.flatpickr-weekday, .ui-datepicker-calendar th, .wp-block-calendar th) {
	text-align: center;
	font: 600 11px/1 var(--ccc-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	text-transform: uppercase;
	color: var(--ccc-text, #515151);
	padding: 6px 0;
	letter-spacing: 0.05em;
	border: none;
}

:is(.ccd-calendar__grid, .flatpickr-days, .dayContainer, .ui-datepicker-calendar tbody) {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	width: 100%;
	box-sizing: border-box;
}

.ui-datepicker-calendar tr {
	display: contents;
}

: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;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	min-height: 40px;
	width: 100%;
	max-width: none;
	height: auto;
	border: 1px solid var(--ccc-border, #d9d9d9);
	border-radius: var(--ccc-radius, 4px);
	background: var(--ccc-page, #f8f8f8);
	color: var(--ccc-ink, #0b1014);
	font: 600 13px/1.2 var(--ccc-font-body, sans-serif);
	cursor: pointer;
	padding: 2px;
	margin: 0;
	box-shadow: none;
	text-decoration: none;
	transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.ccd-calendar__day-num {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
}

.ccd-calendar__cell--blank {
	cursor: default !important;
	border: 0 !important;
	background: transparent !important;
	pointer-events: none;
}

@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, #f8f8f8) !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, .flatpickr-day.selected.today) {
	border-color: var(--ccc-primary, #1e2934) !important;
}

.ccd-calendar__premium,
.ccd-calendar__premium-spacer {
	display: block;
	font-size: 9px;
	font-weight: 700;
	height: 11px;
	line-height: 11px;
	margin-top: 1px;
	white-space: nowrap;
}

.ccd-calendar__premium {
	color: var(--ccc-sale, #ac2c21);
}

.ccd-calendar__premium-spacer {
	visibility: hidden;
	pointer-events: none;
}

.is-chosen .ccd-calendar__premium,
.ccd-calendar__cell[aria-pressed="true"] .ccd-calendar__premium {
	color: inherit !important;
}

.ccd-calendar__legend {
	margin: 16px 0 0;
	font-size: 11px;
	color: var(--ccc-text, #515151);
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	line-height: 1.4;
}

.ccd-calendar__key {
	display: inline-flex;
	align-items: center;
}

.ccd-calendar__key--premium {
	color: var(--ccc-sale, #ac2c21);
	font-weight: 600;
}

/* Checkout Calendar Container */
.ccd-checkout-dates {
	background: var(--ccc-page, #f8f8f8);
	border: 1px solid var(--ccc-border, #d9d9d9);
	border-radius: var(--ccc-radius-lg, 8px);
	padding: 24px;
	margin-bottom: 24px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.ccd-checkout-dates h3 {
	margin: 0 0 16px;
	font: 500 20px/1.2 var(--ccc-font-heading, "Crimson Text", Georgia, serif);
	color: var(--ccc-ink, #0b1014);
}

.ccd-selected {
	margin-top: 12px;
	font-size: 13px;
	color: var(--ccc-ink, #0b1014);
	text-align: center;
}

.ccd-selected.is-error {
	color: var(--ccc-sale, #ac2c21);
}

/* Date input unified styles */
input[type="date"] {
	appearance: auto;
	-webkit-appearance: auto;
	height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--ccc-border, #d9d9d9);
	border-radius: var(--ccc-radius, 4px);
	background: var(--ccc-page, #f8f8f8);
	color: var(--ccc-ink, #0b1014);
	font: 400 14px/1.4 var(--ccc-font-body, sans-serif);
	box-sizing: border-box;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

input[type="date"]:hover {
	border-color: var(--ccc-slate, #bdc2bf);
}

input[type="date"]:focus {
	outline: none;
	border-color: var(--ccc-primary, #1e2934);
	box-shadow: 0 0 0 2px rgba(30, 41, 52, 0.15);
}

/* ==========================================================================
   Modal & Drawer Close Buttons
   Consistent square tokenized close button with centered SVG icon
   ========================================================================== */
.ccq-search__close {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	min-height: 40px !important;
	padding: 0 !important;
	border: 1px solid transparent !important;
	border-radius: var(--ccc-radius, 4px) !important;
	background: transparent !important;
	cursor: pointer !important;
	color: var(--ccc-ink, #0b1014) !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.ccq-search__close:hover {
	background: rgba(11, 16, 20, 0.06) !important;
	color: var(--ccc-primary, #1e2934) !important;
	border-color: transparent !important;
}

.ccq-search__close svg {
	display: block !important;
	width: 20px !important;
	height: 20px !important;
	stroke: currentColor !important;
	stroke-width: 1.8 !important;
	pointer-events: none !important;
}

.ccq-drawer__close {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	min-height: 40px !important;
	border: 1px solid transparent !important;
	border-radius: var(--ccc-radius, 4px) !important;
	background: transparent !important;
	color: var(--ccc-ink, #0b1014) !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	line-height: 1 !important;
	box-sizing: border-box !important;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.ccq-drawer__close:hover {
	background: rgba(11, 16, 20, 0.06) !important;
	color: var(--ccc-primary, #1e2934) !important;
	border-color: transparent !important;
}

.ccq-drawer__close svg {
	display: block !important;
	width: 20px !important;
	height: 20px !important;
	stroke: currentColor !important;
	stroke-width: 1.8 !important;
	pointer-events: none !important;
}

/* ==========================================================================
   Drawer Layering & Footer Cities Alignment
   Guarantees drawers & backdrops sit on top of sticky header,
   and prevents PDP accordion styles from bleeding into footer cities.
   ========================================================================== */
body.ccq-drawer-open .site-header,
body.ccq-cart-open .site-header,
body.cart-widget-opened .site-header,
body.wd-opened .site-header,
body.site-drawer-open .site-header,
body.mobile-menu-active .site-header,
body.modal-open .site-header {
	z-index: 100 !important;
}

.ccq-cdrawer,
.ccq-drawer,
.cart-widget-side,
.wd-side-hidden,
.site-drawer {
	z-index: 99999 !important;
}

.wd-close-side,
.site-drawer-overlay,
.drawer-overlay {
	z-index: 99998 !important;
}

.ccq-cdrawer__backdrop,
.ccq-drawer__backdrop {
	z-index: 1 !important;
}

.ccq-cdrawer__panel,
.ccq-drawer__panel {
	z-index: 2 !important;
}

.footer-us__cities {
	margin: 0 calc(-1 * clamp(16px, 4vw, 84px)) !important;
	padding: 0 clamp(16px, 4vw, 84px) !important;
	border-top: 1px solid var(--ccc-ink, #0b1014) !important;
	border-bottom: none !important;
}

.footer-us__bottom {
	margin: 0 calc(-1 * clamp(16px, 4vw, 84px)) !important;
	padding-inline: clamp(16px, 4vw, 84px) !important;
	padding-block: 28px 32px !important;
	border-top: 1px solid var(--ccc-ink, #0b1014) !important;
	border-bottom: none !important;
}

/* Blog listing and archive headings */
.ccq-blog .container > .ccq-blog-heading,
.ccq-blog-heading {
	margin: 0 0 24px;
	padding-top: clamp(24px, 3vw, 40px);
	font: 400 clamp(32px, 3.6vw, 48px)/1.15 var(--ccc-font-heading, "Crimson Text", Georgia, serif);
	color: var(--ccc-ink, #0b1014);
}