/*
 * Charcuteried components.
 *
 * The shared building blocks every Elementor widget and template uses: buttons,
 * chips, badges, pills, accordions, tabs, breadcrumbs and section color schemes.
 * Every value is a custom property printed from the Design settings
 * (plugins/charcuteried-core/inc/design/design.php), so nothing here carries a
 * color, size or duration of its own. Fallbacks after the comma only cover the
 * moment before the tokens load.
 *
 * Hover effects sit behind (hover: hover) so touch screens never get a stuck
 * hover state, and the reduced-motion rule in style.css shortens every
 * transition.
 */

/* Color schemes: put one on a section to set its background, text and button colors. */
.ccq-scheme-default { --ccq-bg: var(--ccc-page, #fff); --ccq-fg: var(--ccc-text, #515151); --ccq-head: var(--ccc-ink, #0b1014); --ccq-btn-bg: var(--ccc-primary, #1e2934); --ccq-btn-fg: var(--ccc-page, #fff); }
.ccq-scheme-cream   { --ccq-bg: var(--ccc-cream, #f2f1eb); --ccq-fg: var(--ccc-text, #515151); --ccq-head: var(--ccc-ink, #0b1014); --ccq-btn-bg: var(--ccc-primary, #1e2934); --ccq-btn-fg: var(--ccc-page, #fff); }
.ccq-scheme-blush   { --ccq-bg: var(--ccc-blush, #fff2ed); --ccq-fg: var(--ccc-text, #515151); --ccq-head: var(--ccc-ink, #0b1014); --ccq-btn-bg: var(--ccc-primary, #1e2934); --ccq-btn-fg: var(--ccc-page, #fff); }
.ccq-scheme-navy    { --ccq-bg: var(--ccc-primary, #1e2934); --ccq-fg: var(--ccc-page, #fff); --ccq-head: var(--ccc-page, #fff); --ccq-btn-bg: var(--ccc-page, #fff); --ccq-btn-fg: var(--ccc-primary, #1e2934); }
.ccq-scheme-olive   { --ccq-bg: var(--ccc-olive, #494f31); --ccq-fg: var(--ccc-olive-text, #e4ebc2); --ccq-head: var(--ccc-olive-text, #e4ebc2); --ccq-btn-bg: var(--ccc-olive-text, #e4ebc2); --ccq-btn-fg: var(--ccc-olive, #494f31); }
.ccq-scheme-red     { --ccq-bg: var(--ccc-sale, #ac2c21); --ccq-fg: var(--ccc-page, #fff); --ccq-head: var(--ccc-page, #fff); --ccq-btn-bg: var(--ccc-page, #fff); --ccq-btn-fg: var(--ccc-sale, #ac2c21); }

[class*="ccq-scheme-"] {
	background: var(--ccq-bg);
	color: var(--ccq-fg);
}
[class*="ccq-scheme-"] :is(h1, h2, h3, h4, h5, h6) {
	color: var(--ccq-head);
	font-family: var(--ccc-font-heading, "Crimson Text", Georgia, serif);
	font-weight: var(--ccc-weight-heading, 400);
}

/* Uppercase label style shared by buttons, tabs and small headings. */
.ccq-caps {
	text-transform: uppercase;
	letter-spacing: var(--ccc-caps-spacing, 0.14em);
	font-family: var(--ccc-font-body, sans-serif);
}

/*
 * Text roles.
 *
 * One ladder, applied as a class so a component can ask for a role instead of
 * picking a size. The roles mirror the ladder in design.php exactly: a role is
 * a size, a line height, a weight and a tracking, decided together. Before this
 * existed the site carried 45 distinct text sizes across stylesheets, which is
 * how two headings ended up at 34px on one page and 36px on another.
 *
 * The heading roles carry the serif and the body roles carry the sans, so
 * choosing a role also fixes the family.
 */
.ccq-type-display,
.ccq-type-h1,
.ccq-type-h2,
.ccq-type-h3,
.ccq-type-h4,
.ccq-type-h5,
.ccq-type-h6 {
	font-family: var(--ccc-font-heading, "Crimson Text", Georgia, serif);
	font-weight: var(--ccc-weight-heading, 400);
}
.ccq-type-display { font-size: var(--ccc-fs-display, 32px); line-height: var(--ccc-lh-display, 1.1); letter-spacing: -0.01em; }
.ccq-type-h1 { font-size: var(--ccc-fs-h1, 28px); line-height: var(--ccc-lh-h1, 1.15); }
.ccq-type-h2 { font-size: var(--ccc-fs-h2, 24px); line-height: var(--ccc-lh-h2, 1.2); }
.ccq-type-h3 { font-size: var(--ccc-fs-h3, 24px); line-height: var(--ccc-lh-h3, 1.25); }
.ccq-type-h4 { font-size: var(--ccc-fs-h4, 20px); line-height: var(--ccc-lh-h4, 1.3); }
.ccq-type-h5 { font-size: var(--ccc-fs-h5, 18px); line-height: var(--ccc-lh-h5, 1.35); font-weight: 600; }
.ccq-type-h6 { font-size: var(--ccc-fs-h6, 16px); line-height: var(--ccc-lh-h6, 1.4); font-weight: 600; }

.ccq-type-body-lg,
.ccq-type-body,
.ccq-type-body-sm,
.ccq-type-label,
.ccq-type-caption,
.ccq-type-overline {
	font-family: var(--ccc-font-body, sans-serif);
	font-weight: 400;
}
.ccq-type-body-lg { font-size: var(--ccc-fs-body-lg, 16px); line-height: var(--ccc-lh-body-lg, 1.6); }
.ccq-type-body { font-size: var(--ccc-fs-body, 15px); line-height: var(--ccc-lh-body, 1.6); }
.ccq-type-body-sm { font-size: var(--ccc-fs-body-sm, 14px); line-height: var(--ccc-lh-body-sm, 1.5); }
.ccq-type-label { font-size: var(--ccc-fs-label, 13px); line-height: var(--ccc-lh-label, 1.4); font-weight: 600; }
.ccq-type-caption { font-size: var(--ccc-fs-caption, 12px); line-height: var(--ccc-lh-caption, 1.4); color: var(--ccc-text-muted, #707070); }
.ccq-type-overline {
	font-size: var(--ccc-fs-overline, 11px);
	line-height: var(--ccc-lh-overline, 1.2);
	font-weight: 600;
	letter-spacing: var(--ccc-caps-spacing, 0.14em);
	text-transform: uppercase;
}

/* Prices, quantities and totals: one line height and no letter spacing, so columns align. */
.ccq-type-numeric {
	font-family: var(--ccc-font-body, sans-serif);
	font-size: var(--ccc-fs-body, 15px);
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: var(--ccc-track-numeric, 0em);
	font-variant-numeric: tabular-nums;
}

/*
 * Surfaces.
 *
 * Three elevations, one shadow colour. The site used to carry 23 distinct
 * shadows drawn from three different near-blacks, so a card, a drawer and a
 * modal disagreed about what black is.
 */
.ccq-surface-1 { box-shadow: var(--ccc-shadow-1, 0 1px 2px rgb(11 16 20 / 0.06)); }
.ccq-surface-2 { box-shadow: var(--ccc-shadow-2, 0 2px 8px rgb(11 16 20 / 0.1)); }
.ccq-surface-3 { box-shadow: var(--ccc-shadow-3, 0 8px 24px rgb(11 16 20 / 0.14)); }

/*
 * Layers.
 *
 * Named instead of raw numbers, so a drawer cannot end up under a sticky bar
 * because two files picked numbers. The values are the ones already in use, so
 * the stacking order does not change; only the spelling does.
 */
.ccq-layer-base { z-index: var(--ccc-z-base, 0); }
.ccq-layer-raised { z-index: var(--ccc-z-raised, 10); }
.ccq-layer-sticky { z-index: var(--ccc-z-sticky, 100); }
.ccq-layer-header { z-index: var(--ccc-z-header, 1050); }
.ccq-layer-review { z-index: var(--ccc-z-review, 99990); }
.ccq-layer-overlay { z-index: var(--ccc-z-overlay, 2000); }
.ccq-layer-dropdown { z-index: var(--ccc-z-dropdown, 1100); }
.ccq-layer-announce { z-index: var(--ccc-z-announce, 101); }

.ccq-layer-drawer { z-index: var(--ccc-z-drawer, 99998); }
.ccq-layer-modal { z-index: var(--ccc-z-modal, 99999); }

/*
 * Buttons.
 *
 * The parent theme styles every <button> with rules as strong as
 * button:not(.unset):not(.link), which beats a single class. Repeating the class
 * three times lifts these rules above them without !important. Anchors need none
 * of it, and it does no harm there.
 *
 * Three sizes, four variants, and every state named. The state matrix is the
 * point: before this the site had no pressed state at all, so a tap gave the
 * same feedback as no tap, and no destructive variant, so "remove" looked like
 * "continue".
 */
.ccq-btn.ccq-btn.ccq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	box-sizing: border-box;
	height: auto;
	min-height: var(--ccc-btn-height-mobile, 44px);
	min-width: var(--ccc-btn-min-width, 120px);
	padding: 0 var(--ccc-btn-pad-x, 22px);
	border: 1px solid var(--ccq-btn-bg, var(--ccc-primary, #1e2934));
	border-radius: var(--ccc-radius, 4px);
	background: var(--ccq-btn-bg, var(--ccc-primary, #1e2934));
	box-shadow: none;
	color: var(--ccq-btn-fg, var(--ccc-page, #fff));
	/*
	 * A flat size, not a clamp(). A fluid font size made the same button render
	 * at four different sizes across viewports, which is the drift this file
	 * exists to remove.
	 */
	font: var(--ccc-weight-button, 600) var(--ccc-btn-fs-md, 12px) / 1 var(--ccc-font-body, sans-serif);
	text-transform: uppercase;
	letter-spacing: var(--ccc-caps-spacing, 0.14em);
	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) {
	.ccq-btn.ccq-btn.ccq-btn { min-height: var(--ccc-btn-height, 40px); }
}

/* Sizes. sm and lg override the medium height, padding and text size. */
.ccq-btn.ccq-btn.ccq-btn.ccq-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);
}
.ccq-btn.ccq-btn.ccq-btn.ccq-btn--lg {
	min-height: var(--ccc-btn-h-lg, 52px);
	padding: 0 var(--ccc-btn-pad-x-lg, 32px);
	font-size: var(--ccc-btn-fs-lg, 14px);
}

/* Icons scale with the button, so a small button never carries a large glyph. */
.ccq-btn .ccq-btn__icon,
.ccq-btn > svg:first-child,
.ccq-btn > svg:last-child {
	width: var(--ccc-icon-md, 16px);
	height: var(--ccc-icon-md, 16px);
	flex: none;
}
.ccq-btn--lg .ccq-btn__icon,
.ccq-btn--lg > svg:first-child,
.ccq-btn--lg > svg:last-child {
	width: var(--ccc-icon-lg, 20px);
	height: var(--ccc-icon-lg, 20px);
}

/* Outline: the same button turned inside out. */
.ccq-btn.ccq-btn.ccq-btn.ccq-btn--outline {
	background: transparent;
	color: var(--ccq-btn-bg, var(--ccc-primary, #1e2934));
}

/* Destructive: the danger token, so a removal never looks like a confirmation. */
.ccq-btn.ccq-btn.ccq-btn.ccq-btn--destructive {
	border-color: var(--ccc-danger, #b12535);
	background: var(--ccc-danger, #b12535);
	color: var(--ccc-text-inverse, #ffffff);
}
@media (hover: hover) {
	.ccq-btn.ccq-btn.ccq-btn.ccq-btn--destructive:hover {
		background: transparent;
		color: var(--ccc-danger, #b12535);
	}
}
.ccq-btn.ccq-btn.ccq-btn.ccq-btn--destructive:active {
	background: transparent;
	color: var(--ccc-danger, #b12535);
}

/* Text link with an underline that draws in from the left. */
.ccq-btn.ccq-btn.ccq-btn.ccq-btn--link {
	min-width: 0;
	min-height: 0;
	padding: 0.2em 0;
	border: 0;
	border-radius: 0;
	background: transparent linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px;
	color: var(--ccq-head, var(--ccc-ink, #0b1014));
	transition: background-size var(--ccc-duration, 250ms) var(--ccc-ease, ease-in-out);
}

/* Arrow link: the arrow nudges right. */
.ccq-btn.ccq-btn.ccq-btn.ccq-btn--arrow { min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--ccq-head, var(--ccc-ink, #0b1014)); }
.ccq-btn--arrow .ccq-btn__icon { transition: transform var(--ccc-duration, 250ms) var(--ccc-ease, ease-in-out); }

.ccq-btn.ccq-btn.ccq-btn:focus-visible { outline: none; box-shadow: var(--ccc-focus, 0 0 0 1px var(--ccc-primary)); }
.ccq-btn.ccq-btn.ccq-btn[disabled],
.ccq-btn.ccq-btn.ccq-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/*
 * Pressed. A tap gets feedback of its own instead of looking like a hover.
 * Sits on :active only, so a mouse held down over a link does not latch it.
 */
.ccq-btn.ccq-btn.ccq-btn:not([disabled]):not([aria-disabled="true"]):active {
	filter: brightness(0.88);
	transform: translateY(1px);
}

/*
 * Loading. The label stays in place so the button does not resize, the pointer
 * stops accepting clicks, and the state is announced. Applied as
 * .is-loading alongside aria-busy="true" by the caller.
 */
.ccq-btn.ccq-btn.ccq-btn.is-loading { position: relative; color: transparent; pointer-events: none; }
/*
 * The ring colour cannot be currentColor: hiding the label sets the button's
 * color to transparent, which makes currentColor transparent too and leaves a
 * spinner that is invisible against its own button. Read the intended ink the
 * scheme exposes instead.
 */
.ccq-btn.ccq-btn.ccq-btn.is-loading::after {
	content: "";
	position: absolute;
	width: 1em;
	height: 1em;
	border: 2px solid var(--ccq-btn-fg, var(--ccc-page, #ffffff));
	border-radius: 50%;
	border-top-color: transparent;
	animation: ccq-spin var(--ccc-duration, 250ms) linear infinite;
}
@keyframes ccq-spin { to { transform: rotate(360deg); } }

@media (hover: hover) {
	.ccq-btn.ccq-btn.ccq-btn:hover { background: transparent; color: var(--ccq-btn-bg, var(--ccc-primary, #1e2934)); }
	.ccq-btn.ccq-btn.ccq-btn.ccq-btn--outline:hover { background: var(--ccq-btn-bg, var(--ccc-primary, #1e2934)); color: var(--ccq-btn-fg, var(--ccc-page, #fff)); }
	.ccq-btn.ccq-btn.ccq-btn.ccq-btn--link:hover { background-size: 0 1px; color: var(--ccq-head, var(--ccc-ink, #0b1014)); }
	.ccq-btn.ccq-btn.ccq-btn.ccq-btn--arrow:hover { background: transparent; color: var(--ccq-head, var(--ccc-ink, #0b1014)); }
	.ccq-btn--arrow:hover .ccq-btn__icon { transform: translate3d(3px, 0, 0); }
}

/*
 * Icon-only buttons.
 *
 * A square control with equal sides, centred with flex rather than with a nudge
 * of padding, and one icon size for all of them. This is the same rule
 * harmony.css section 13 spells out with !important for selectors the theme
 * cannot reach; here it is the canonical component those selectors copy.
 */
.ccq-icon-btn.ccq-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--ccc-btn-h-md, 40px);
	height: var(--ccc-btn-h-md, 40px);
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--ccc-radius, 4px);
	background: transparent;
	color: var(--ccc-ink, #0b1014);
	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);
}
.ccq-icon-btn.ccq-icon-btn .ccq-btn__icon,
.ccq-icon-btn.ccq-icon-btn > svg {
	display: block;
	width: var(--ccc-icon-lg, 20px);
	height: var(--ccc-icon-lg, 20px);
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	margin: 0;
	pointer-events: none;
}
.ccq-icon-btn.ccq-icon-btn:focus-visible { outline: none; box-shadow: var(--ccc-focus, 0 0 0 1px var(--ccc-primary)); }
@media (hover: hover) {
	.ccq-icon-btn.ccq-icon-btn:hover { background: rgb(11 16 20 / 0.06); color: var(--ccc-primary, #1e2934); }
}
.ccq-icon-btn.ccq-icon-btn:active { background: rgb(11 16 20 / 0.12); }

/*
 * Alerts.
 *
 * One component for a message, four severities, and a level for how loud it
 * should be. This is the validation hierarchy the checkout needs: a field error
 * is field-level, a section error is section-level, a page error is page-level,
 * and only a system failure gets the full weight. Before this the site carried
 * several alert look-alikes with different padding and different icons.
 *
 * role="alert" or aria-live on the element, not on the container, so the
 * announcement comes from the message and not from the chrome around it.
 */
.ccq-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--ccc-space-3, 12px);
	box-sizing: border-box;
	padding: var(--ccc-space-4, 16px);
	border: 1px solid var(--ccc-border, #d9d9d9);
	border-radius: var(--ccc-radius-lg, 8px);
	background: var(--ccc-page, #fff);
	color: var(--ccc-text, #515151);
}
.ccq-alert__icon {
	width: var(--ccc-icon-lg, 20px);
	height: var(--ccc-icon-lg, 20px);
	flex: none;
	margin-top: 0.1em;
}
.ccq-alert__body { flex: 1 1 auto; min-width: 0; }
.ccq-alert__title {
	margin: 0 0 var(--ccc-space-1, 4px);
	font-family: var(--ccc-font-body, sans-serif);
	font-size: var(--ccc-fs-label, 13px);
	line-height: var(--ccc-lh-label, 1.4);
	font-weight: 600;
	color: var(--ccc-ink, #0b1014);
}
.ccq-alert__text {
	margin: 0;
	font-size: var(--ccc-fs-body-sm, 14px);
	line-height: var(--ccc-lh-body-sm, 1.5);
}
.ccq-alert__list { margin: var(--ccc-space-1, 4px) 0 0; padding-left: var(--ccc-space-4, 16px); }
.ccq-alert__list li + li { margin-top: var(--ccc-space-1, 4px); }

/* Severity colours the border, the icon and the title together. */
.ccq-alert--error { border-color: var(--ccc-danger, #b12535); background: var(--ccc-page, #fff); }
.ccq-alert--error .ccq-alert__icon,
.ccq-alert--error .ccq-alert__title { color: var(--ccc-danger, #b12535); }
.ccq-alert--error { background: rgb(177 37 53 / 0.04); }

.ccq-alert--success { border-color: var(--ccc-olive, #494f31); background: rgb(73 79 49 / 0.04); }
.ccq-alert--success .ccq-alert__icon,
.ccq-alert--success .ccq-alert__title { color: var(--ccc-olive, #494f31); }

.ccq-alert--warning { border-color: var(--ccc-sale, #ac2c21); background: rgb(172 44 33 / 0.04); }
.ccq-alert--warning .ccq-alert__icon,
.ccq-alert--warning .ccq-alert__title { color: var(--ccc-sale, #ac2c21); }

/* Field level: no chrome at all, just the message under the input. */
.ccq-alert--field {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	align-items: center;
	gap: var(--ccc-space-2, 8px);
}
.ccq-alert--field .ccq-alert__title { display: none; }
.ccq-alert--field .ccq-alert__text { font-size: var(--ccc-fs-caption, 12px); line-height: var(--ccc-lh-caption, 1.4); }
.ccq-alert--field .ccq-alert__icon { width: var(--ccc-icon-sm, 14px); height: var(--ccc-icon-sm, 14px); margin: 0; }

/* Chips: filter options, tags. Checked turns to the primary color. */
.ccq-chip {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 var(--ccc-space-3, 12px);
	border: 1px solid var(--ccc-border, #d9d9d9);
	border-radius: var(--ccc-radius-pill, 100px);
	background: var(--ccc-page, #fff);
	color: var(--ccc-ink, #0b1014);
	font: 400 var(--ccc-fs-body-sm, 14px)/1 var(--ccc-font-body, sans-serif);
	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);
}
.ccq-chip[aria-pressed="true"], .ccq-chip.is-active, input:checked + .ccq-chip {
	background: var(--ccc-primary, #1e2934);
	border-color: var(--ccc-primary, #1e2934);
	color: var(--ccc-page, #fff);
}

/* Badges and pills. */
.ccq-badge {
	display: inline-block;
	padding: var(--ccc-space-1, 4px) var(--ccc-space-2, 8px);
	border-radius: var(--ccc-radius, 4px);
	background: var(--ccc-primary, #1e2934);
	color: var(--ccc-page, #fff);
	font: var(--ccc-weight-button, 600) var(--ccc-fs-overline, 11px)/1 var(--ccc-font-body, sans-serif);
	text-transform: uppercase;
	letter-spacing: var(--ccc-caps-spacing, 0.14em);
}
.ccq-badge--sale { background: var(--ccc-sale, #ac2c21); }
.ccq-badge--light { background: var(--ccc-cream, #f2f1eb); color: var(--ccc-ink, #0b1014); }
.ccq-pill {
	display: inline-block;
	padding: var(--ccc-space-2, 8px) var(--ccc-space-3, 12px);
	border-radius: var(--ccc-radius-pill, 100px);
	background: var(--ccc-cream, #f2f1eb);
	color: var(--ccc-ink, #0b1014);
	font: var(--ccc-weight-button, 600) var(--ccc-fs-caption, 12px)/1.2 var(--ccc-font-body, sans-serif);
}

/* Accordion: a <details> block with a plus that turns to a minus. */
.ccq-accordion { border-bottom: 1px solid var(--ccc-border, #d9d9d9); }
.ccq-accordion > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 60px;
	cursor: pointer;
	list-style: none;
	font: var(--ccc-weight-button, 600) var(--ccc-fs-body-sm, 14px)/1.2 var(--ccc-font-body, sans-serif);
	text-transform: uppercase;
	letter-spacing: var(--ccc-caps-spacing, 0.14em);
}
.ccq-accordion > summary::-webkit-details-marker { display: none; }
.ccq-accordion > summary::after { content: "+"; font-size: var(--ccc-icon-lg, 20px); line-height: 1; transition: transform var(--ccc-duration, 250ms) var(--ccc-ease, ease-in-out); }
.ccq-accordion[open] > summary::after { content: "\2212"; }
.ccq-accordion__body { padding: 0 0 20px; }

/* Tabs: a row of buttons. The active one carries an underline. */
.ccq-tabs { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 24px; padding: 0; list-style: none; }
.ccq-tabs__tab {
	padding: 8px 0;
	border: 0;
	border-bottom: 1px solid transparent;
	background: none;
	color: var(--ccc-ink, #0b1014);
	font: var(--ccc-weight-button, 600) var(--ccc-fs-label, 13px)/1 var(--ccc-font-body, sans-serif);
	text-transform: uppercase;
	letter-spacing: var(--ccc-caps-spacing, 0.14em);
	cursor: pointer;
	transition: border-color var(--ccc-duration, 250ms) var(--ccc-ease, ease-in-out);
}
.ccq-tabs__tab[aria-selected="true"] { border-bottom-color: currentColor; box-shadow: inset 0 -1px 0 currentColor; }
.ccq-tabs__tab:focus-visible { outline: none; box-shadow: var(--ccc-focus, 0 0 0 2px currentColor); }

/* Breadcrumbs. */
.ccq-breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 12px var(--ccc-gutter, 16px); list-style: none; font: 400 var(--ccc-fs-label, 13px)/1.2 var(--ccc-font-body, sans-serif); color: var(--ccc-text, #515151); }
.ccq-breadcrumbs li + li::before { content: "/"; margin-right: 6px; opacity: 0.5; }
.ccq-breadcrumbs a { color: inherit; text-decoration: none; }

/* Page wrap: the shared side gutter. */
.ccq-wrap { padding-left: var(--ccc-gutter, 16px); padding-right: var(--ccc-gutter, 16px); }
/* Padding, not margin, so a section with a background color fills its own space. */
.ccq-section { padding-top: var(--ccc-section-gap, 48px); padding-bottom: var(--ccc-section-gap, 48px); }

/* Product & card grid. Responsive columns controlled via --ccq-cols and --ccq-cols-m. */
.ccq-grid {
	display: grid;
	gap: 28px 16px;
	grid-template-columns: repeat(var(--ccq-cols-m, 2), minmax(0, 1fr));
}
@media (min-width: 768px) {
	.ccq-grid {
		grid-template-columns: repeat(var(--ccq-cols-t, 3), minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.ccq-grid {
		grid-template-columns: repeat(var(--ccq-cols, 4), minmax(0, 1fr));
		gap: 40px 20px;
	}
}

/* Cookie notice: a slim bar along the bottom edge, not a card over the page. */
.site-gdpr.active { left: 0; right: 0; bottom: 0; width: auto; max-width: none; padding: 14px var(--ccc-gutter, 16px); border-radius: 0; border-top: 1px solid var(--ccc-border, #d9d9d9); box-shadow: none; background: var(--ccc-page, #fff); }
.site-gdpr .gdpr-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; padding: 0; text-align: left; }
.site-gdpr .gdpr-icon { display: none; }
.site-gdpr .gdpr-text { margin: 0; font: 400 var(--ccc-fs-body-sm, 14px)/1.4 var(--ccc-font-body, sans-serif); color: var(--ccc-text, #515151); }
.site-gdpr .gdpr-text br { display: none; }
.site-gdpr .gdpr-text a { color: inherit; text-decoration: underline; }
.site-gdpr .gdpr-button { margin: 0; }

/* Third-party front ends (AffiliateWP, AutomateWoo) wear the site's tokens. */
.affwp-form input[type="submit"], #affwp-affiliate-dashboard input[type="submit"], .affwp-button, .automatewoo-button, .aw-button {
	min-height: var(--ccc-btn-height, 40px); padding: 0 22px; border: 0; border-radius: var(--ccc-radius, 4px);
	background: var(--ccc-primary, #1e2934); color: #fff; font: var(--ccc-weight-button, 600) var(--ccc-fs-caption, 12px)/1 var(--ccc-font-body, sans-serif);
	letter-spacing: var(--ccc-caps-spacing, 0.14em); text-transform: uppercase; cursor: pointer;
}
.affwp-form legend { font: 400 var(--ccc-fs-h3, 24px)/1.2 var(--ccc-font-heading, "Crimson Text", Georgia, serif); color: var(--ccc-ink, #0b1014); margin-bottom: 12px; }
.affwp-form label { font: var(--ccc-weight-button, 600) var(--ccc-fs-label, 13px)/1.3 var(--ccc-font-body, sans-serif); color: var(--ccc-ink, #0b1014); }
#affwp-affiliate-dashboard-tabs { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 0 24px; padding: 0; list-style: none; border-bottom: 1px solid var(--ccc-border, #d9d9d9); }
#affwp-affiliate-dashboard-tabs a { display: block; padding: 10px 0; font: 400 var(--ccc-fs-h5, 18px)/1 var(--ccc-font-heading, "Crimson Text", Georgia, serif); color: var(--ccc-text, #515151); text-decoration: none; border-bottom: 2px solid transparent; }
#affwp-affiliate-dashboard-tabs .active a, #affwp-affiliate-dashboard-tabs a:hover { color: var(--ccc-ink, #0b1014); border-bottom-color: var(--ccc-ink, #0b1014); }
#affwp-affiliate-dashboard table { width: 100%; border-collapse: collapse; }
#affwp-affiliate-dashboard th { text-align: left; font: var(--ccc-weight-button, 600) var(--ccc-fs-label, 13px)/1.2 var(--ccc-font-body, sans-serif); }
#affwp-affiliate-dashboard th, #affwp-affiliate-dashboard td { padding: 10px 8px; border-bottom: 1px solid var(--ccc-border, #d9d9d9); }

/* WPLoyalty launcher: its utility classes set black text on the navy banner and button. */
#wll-site-launcher .wll-launcher-button-container,
#wll-site-launcher .wll-launcher-button-container * { color: #fff !important; }
#wll-site-launcher .wll-banner-container,
#wll-site-launcher .wll-banner-container * { color: #fff !important; }
#wll-site-launcher .wll-banner-container .wll-welcome-signup-button { background: #fff !important; border-color: #fff !important; }
#wll-site-launcher .wll-banner-container .wll-welcome-signup-button *,
#wll-site-launcher .wll-banner-container .wll-welcome-signup-button { color: var(--ccc-primary, #1e2934) !important; }
#wll-site-launcher .wll-banner-container a { text-decoration: underline; text-underline-offset: 3px; }
#wll-site-launcher a[href*="wployalty"] { color: var(--ccc-primary, #1e2934) !important; }
#wll-site-launcher .text-light { color: var(--ccc-text, #515151) !important; }
#wll-site-launcher .wll-banner-container .text-light { color: #fff !important; }
/* Rewards panel: no vendor footer, and a close button whose X can be seen on navy. */
#wll-site-launcher .wll-footer-container { display: none !important; }
#wll-site-launcher .wll-home-close-icon-container, #wll-site-launcher .wll-home-close-icon-container * { color: #fff !important; }

/*
 * Canonical Rewards Pill Component (Harmony Section 41.2)
 * Unified across Cart and Checkout to eliminate visual, color, and spacing drift.
 */
:root {
	--ccq-rewards-bg: #eef2eb;
	--ccq-rewards-border: #dce6d5;
	--ccq-rewards-ink: #2d5a27;
}

.ccq-rewards-pill,
.ccq-order-summary__rewards-pill,
.ccq-checkout-rewards-pill {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--ccq-rewards-bg, #eef2eb);
	border: 1px solid var(--ccq-rewards-border, #dce6d5);
	border-radius: var(--ccc-radius, 6px);
	font-size: var(--ccc-fs-label, 13px);
	line-height: 1.4;
	color: var(--ccq-rewards-ink, #2d5a27);
	margin-bottom: 20px;
	box-sizing: border-box;
}

.ccq-rewards-pill__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--ccq-rewards-ink, #2d5a27);
}

.ccq-rewards-pill__text {
	flex: 1;
	font-size: var(--ccc-fs-label, 13px);
	line-height: 1.4;
}

.ccq-rewards-pill__text strong {
	font-weight: 600;
	color: var(--ccq-rewards-ink, #2d5a27);
}

/*
 * Canonical 4-Tier Validation & Notice Hierarchy (Harmony Section 41.3)
 * Field-level -> Section-level -> Page-level -> System-level
 */
:root {
	--ccq-alert-error-bg: #fdf2f2;
	--ccq-alert-error-border: #f8b4b4;
	--ccq-alert-error-ink: #9b1c1c;

	--ccq-alert-warn-bg: #fdf6b2;
	--ccq-alert-warn-border: #faca15;
	--ccq-alert-warn-ink: #723b13;

	--ccq-alert-info-bg: #eef2eb;
	--ccq-alert-info-border: #dce6d5;
	--ccq-alert-info-ink: #2d5a27;

	--ccq-alert-system-bg: #1e2934;
	--ccq-alert-system-border: #1e2934;
	--ccq-alert-system-ink: #ffffff;
}

/* Page & Section level notices across WooCommerce and CheckoutWC */
.woocommerce-error,
.woocommerce-NoticeGroup-checkout .woocommerce-error,
.cfw-alert-danger,
.cfw-alert-error,
.cfw-alert.cfw-alert-error,
.ccq-alert--error {
	background: var(--ccq-alert-error-bg, #fdf2f2) !important;
	border: 1px solid var(--ccq-alert-error-border, #f8b4b4) !important;
	color: var(--ccq-alert-error-ink, #9b1c1c) !important;
	border-radius: var(--ccc-radius, 6px) !important;
	padding: 12px 16px !important;
	margin-bottom: 20px !important;
	font-size: var(--ccc-fs-label, 13px) !important
	line-height: 1.45 !important;
	list-style: none !important;
}

.woocommerce-info,
.cfw-alert-info,
.ccq-alert--info {
	background: var(--ccq-alert-info-bg, #eef2eb) !important;
	border: 1px solid var(--ccq-alert-info-border, #dce6d5) !important;
	color: var(--ccq-alert-info-ink, #2d5a27) !important;
	border-radius: var(--ccc-radius, 6px) !important;
	padding: 12px 16px !important;
	margin-bottom: 20px !important;
	font-size: var(--ccc-fs-label, 13px) !important
	line-height: 1.45 !important;
}

.woocommerce-message,
.cfw-alert-success,
.ccq-alert--success {
	background: var(--ccq-alert-info-bg, #eef2eb) !important;
	border: 1px solid var(--ccq-alert-info-border, #dce6d5) !important;
	color: var(--ccq-alert-info-ink, #2d5a27) !important;
	border-radius: var(--ccc-radius, 6px) !important;
	padding: 12px 16px !important;
	margin-bottom: 20px !important;
	font-size: var(--ccc-fs-label, 13px) !important
	line-height: 1.45 !important;
}

/* Field-level error validation message */
.woocommerce-invalid .woocommerce-error,
.cfw-input-wrap.has-error .cfw-field-error,
.ccq-field-error {
	font-size: var(--ccc-fs-caption, 12px) !important
	color: var(--ccq-alert-error-ink, #9b1c1c) !important;
	margin-top: 4px !important;
	line-height: 1.3 !important;
}

/*
 * Canonical Checkout Stepper & Breadcrumb Hierarchy (Harmony Section 41.4)
 */
#cfw-breadcrumb {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 8px 14px !important;
	margin: 0 0 24px 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

#cfw-breadcrumb li {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-family: var(--ccc-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
	font-size: var(--ccc-fs-label, 13px) !important
	font-weight: 500 !important;
	color: var(--ccc-text, #707070) !important;
}

#cfw-breadcrumb li a {
	color: inherit !important;
	text-decoration: none !important;
}

#cfw-breadcrumb li.active {
	color: var(--ccc-primary, #1e2934) !important;
	font-weight: 600 !important;
}

#cfw-breadcrumb li.active a {
	color: var(--ccc-primary, #1e2934) !important;
}

#cfw-breadcrumb li:before {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
	min-height: 24px !important;
	border-radius: 50% !important;
	font-size: var(--ccc-fs-overline, 11px) !important
	font-weight: 700 !important;
	line-height: 1 !important;
	background: #f0f2f5 !important;
	color: #707070 !important;
	margin: 0 !important;
}

#cfw-breadcrumb li.active:before {
	background: var(--ccc-primary, #1e2934) !important;
	color: #ffffff !important;
}

#cfw-breadcrumb li:not(.active):not(.active ~ li):before {
	background: #eef2eb !important;
	color: #2d5a27 !important;
}

#cfw-breadcrumb li + li:after {
	display: none !important;
}

/* ==========================================================================
   Universal Calendar & Date Picker Design System
   Applies unified Charcuteried design tokens to all calendars across views,
   including delivery calendar, Flatpickr, jQuery UI datepicker, HTML5 inputs,
   and any current or future plugin calendars.
   ========================================================================== */

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

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

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

/* Circular Nav Buttons */
:is(.ccd-calendar__nav, button.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, #ffffff) !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, button.ccd-calendar__nav, .flatpickr-prev-month, .flatpickr-next-month, .ui-datepicker-prev, .ui-datepicker-next):hover:not(:disabled):not(.ui-state-disabled) {
		border-color: var(--ccc-primary, #1e2934) !important;
		background: var(--ccc-cream, #f2f1eb) !important;
		color: var(--ccc-ink, #0b1014) !important;
	}
}

:is(.ccd-calendar__nav:disabled, button.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;
}

/* Weekday header row */
: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) {
	text-align: center !important;
	font: var(--ccc-weight-button, 600) var(--ccc-fs-overline, 11px)/1 var(--ccc-font-body, 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;
}

/* Day grid container */
: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;
}

/* Day cells */
:is(
	.ccd-calendar__cell,
	button.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, #ffffff) !important;
	color: var(--ccc-ink, #0b1014) !important;
	font: var(--ccc-weight-button, 600) var(--ccc-fs-label, 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;
}

/* Hover cell */
@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;
	}
}

/* Chosen / Selected cell */
:is(
	.ccd-calendar__cell.is-chosen,
	button.ccd-calendar__cell.is-chosen,
	.ccd-calendar__cell[aria-pressed="true"],
	.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, #ffffff) !important;
}

/* Disabled / Unavailable cell */
:is(
	.ccd-calendar__cell.is-unavailable,
	.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;
	border-color: #ededed !important;
	cursor: not-allowed !important;
	text-decoration: line-through !important;
}

/* Today cell */
:is(.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;
}

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

/* Native HTML5 date input */
input[type="date"] {
	font-family: var(--ccc-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	height: var(--ccc-btn-height, 44px);
	border: 1px solid var(--ccc-border, #d9d9d9);
	border-radius: var(--ccc-radius, 4px);
	padding: 0 14px;
	color: var(--ccc-ink, #0b1014);
	background-color: var(--ccc-page, #ffffff);
	font-size: var(--ccc-fs-body-sm, 14px);
	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);
}

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

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

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

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

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

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