/* =============================================================================
   Plugin skin — the quote wizard (CB Quote Requests) and the careers pages (CB Jobs)
   drawn in the theme's own look: its colour tokens (so Noir works too), one button
   shape in every state, paper corners on fields, no gradients or glows.

   Loaded after legacy-components.css. "html body" outranks the plugins' own inline
   styles; !important is kept for the few properties Elementor's Site Settings also
   set on every <button> (see cb_layer_elementor_kit() in functions.php).
   ========================================================================== */

/* ---- quote wizard: the card ------------------------------------------------- */
html body .cb-quote-modal { background: rgba(14, 8, 6, .62); }
html body .cb-quote-modal-card {
	background: var(--surface); color: var(--ink); font-family: var(--f-ui);
	border: 1px solid var(--line); border-radius: var(--r-lg);
	box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .6);
}
html body .cb-quote-modal-card::before { height: 3px; background: var(--accent); background-image: none; }

html body .cb-quote-modal .cb-quote-modal-close {
	border: 1px solid var(--line) !important; background: var(--surface) !important; background-image: none !important;
	color: var(--ink) !important; box-shadow: none !important;
}
html body .cb-quote-modal .cb-quote-modal-close:is(:hover, :focus-visible) {
	background: var(--ink) !important; background-image: none !important; color: var(--bg) !important; border-color: var(--ink) !important;
}

html body .cb-q-header .cb-quote-eyebrow { font-weight: 500; letter-spacing: .24em; color: var(--gold); }
html body .cb-q-header .cb-quote-eyebrow::before { content: none; }
html body .cb-q-header h2 { font-family: var(--f-display); color: var(--ink); }
html body .cb-q-header h2 em { font-style: normal; background: none; -webkit-text-fill-color: currentColor; color: var(--accent); }
html body .cb-q-tagline { color: var(--ink-2); }

/* ---- progress + step numbers ---------------------------------------------------- */
html body .cb-q-progress-track { height: 3px; background: var(--line); }
html body .cb-q-progress-bar { background: var(--accent); background-image: none; }
html body .cb-q-step-counter { font-weight: 500; color: var(--muted); }
html body .cb-q-step-label { font-family: var(--f-display); font-size: 16px; color: var(--ink); }
html body .cb-q-dots { gap: 8px; margin-top: 14px; }
/* every state keeps the same round shape; only the colours change */
html body .cb-quote-modal .cb-q-dot,
html body .cb-quote-modal .cb-q-dot:is(:hover, :focus, :active) {
	width: 30px !important; height: 30px !important; min-width: 0 !important; min-height: 0 !important;
	padding: 0 !important; margin: 0 !important; border-radius: 50% !important;
	border: 1px solid var(--line) !important; background: transparent !important; background-image: none !important;
	color: var(--muted) !important; font: 500 12px/1 var(--f-ui) !important; box-shadow: none !important; transform: none !important;
}
html body .cb-quote-modal .cb-q-dot.is-done { border-color: color-mix(in srgb, var(--accent) 50%, transparent) !important; color: var(--accent) !important; }
html body .cb-quote-modal .cb-q-dot.is-done:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--accent) 10%, transparent) !important; }
html body .cb-quote-modal .cb-q-dot.is-active,
html body .cb-quote-modal .cb-q-dot.is-active:is(:hover, :focus, :active) { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent) !important; }

/* ---- fields -------------------------------------------------------------------------- */
html body .cb-quote-modal .cb-q-field > span:first-child,
html body .cb-quote-modal .cb-q-file-label {
	font: 500 11.5px/1.4 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
html body .cb-quote-modal .cb-q-field > span:first-child em { color: var(--accent); }
html body .cb-quote-modal .cb-q-field > span:first-child small { letter-spacing: 0; color: var(--muted); }
html body .cb-quote-modal :is(.cb-q-field input, .cb-q-field select, .cb-q-field textarea, .cb-q-other-input) {
	min-height: 50px; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: var(--r);
	background: var(--bg); color: var(--ink); font: 400 15px/1.4 var(--f-ui); box-shadow: none;
}
html body .cb-quote-modal :is(.cb-q-field input, .cb-q-field select, .cb-q-field textarea):hover { border-color: color-mix(in srgb, var(--ink) 34%, transparent); }
html body .cb-quote-modal :is(.cb-q-field input, .cb-q-field select, .cb-q-field textarea, .cb-q-other-input):focus {
	outline: none; border-color: var(--gold); background: var(--bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}
html body .cb-quote-modal :is(.cb-q-field input, .cb-q-field select, .cb-q-field textarea).is-invalid {
	border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

/* choice cards (finishes, product format, the recommendation box) */
html body .cb-quote-modal :is(.cb-q-check, .cb-q-support) {
	background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink-2); box-shadow: none; transform: none;
}
html body .cb-quote-modal :is(.cb-q-check, .cb-q-support):hover { background: var(--bg); border-color: color-mix(in srgb, var(--ink) 34%, transparent); transform: none; }
html body .cb-quote-modal :is(.cb-q-check, .cb-q-support):has(input:checked) {
	border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg)); color: var(--ink); box-shadow: none;
}
html body .cb-quote-modal :is(.cb-q-check, .cb-q-support) input { accent-color: var(--accent); }
html body .cb-quote-modal .cb-q-support span { color: var(--ink-2); }
html body .cb-quote-modal .cb-q-support strong { color: var(--ink); }
html body .cb-quote-modal .cb-q-check-desc small { color: var(--muted); }
html body .cb-quote-modal .cb-q-group { border-bottom: 1px solid var(--line); }
html body .cb-quote-modal .cb-q-info-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); }
html body .cb-quote-modal .cb-q-info-label { font-weight: 500; color: var(--gold); }
html body .cb-quote-modal .cb-q-info-value { font-family: var(--f-display); color: var(--ink); }
html body .cb-quote-modal .cb-q-info-note { color: var(--muted); }

/* file drops */
html body .cb-quote-modal .cb-q-file-drop {
	border: 1px dashed color-mix(in srgb, var(--ink) 26%, transparent); border-radius: var(--r); background: var(--bg); transform: none;
}
html body .cb-quote-modal .cb-q-file-drop:hover { border-color: var(--ink); background: var(--bg); transform: none; }
html body .cb-quote-modal .cb-q-file-icon { border-radius: var(--r); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); background-image: none; }
html body .cb-quote-modal .cb-q-file-name { color: var(--ink); font-weight: 500; }
html body .cb-quote-modal .cb-q-file-drop small { color: var(--muted); }
html body .cb-quote-modal .cb-q-file.has-file .cb-q-file-drop { border-style: solid; border-color: var(--accent); background: var(--bg); }
html body .cb-quote-modal .cb-q-file.has-file .cb-q-file-icon { background: var(--accent); background-image: none; color: var(--on-accent); }

/* step 4 uploads: the three boxes line up under their titles; the reference note sits under its box */
html body .cb-quote-modal .cb-q-row-3 { align-items: start; }
html body .cb-quote-modal .cb-q-file { display: flex; flex-direction: column; }
html body .cb-quote-modal .cb-q-file-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .cb-quote-modal .cb-q-file-drop { order: 1; min-height: 142px; justify-content: center; }
html body .cb-quote-modal .cb-q-file-sub { order: 2; margin: 8px 2px 0; font-size: 12px; font-style: normal; line-height: 1.45; color: var(--muted); }

html body .cb-quote-modal .cb-q-error { border-radius: var(--r); background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); }

/* ---- wizard buttons: the theme's pill, same shape at rest, on hover and when pressed ---- */
html body .cb-quote-modal .cb-q-btn,
html body .cb-quote-modal .cb-q-btn:is(:hover, :focus, :focus-visible, :active) {
	height: 52px !important; min-height: 0 !important; padding: 0 26px !important; margin: 0 !important;
	border-radius: 999px !important; border: 1.5px solid transparent !important; background-image: none !important;
	font: 500 13px/1 var(--f-ui) !important; letter-spacing: .08em !important; text-transform: uppercase !important;
	box-shadow: none !important; transform: none !important;
}
html body .cb-quote-modal .cb-q-btn-primary { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent) !important; }
html body .cb-quote-modal .cb-q-btn-primary:is(:hover, :focus-visible) { background: var(--accent-deep) !important; border-color: var(--accent-deep) !important; color: var(--on-accent) !important; }
html body .cb-quote-modal .cb-q-btn-ghost { background: transparent !important; border-color: color-mix(in srgb, var(--ink) 30%, transparent) !important; color: var(--ink) !important; }
html body .cb-quote-modal .cb-q-btn-ghost:is(:hover, :focus-visible) { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--bg) !important; }

/* sent */
html body .cb-quote-modal .cb-q-success-icon { background: var(--accent); background-image: none; color: var(--on-accent); box-shadow: none; }
html body .cb-quote-modal .cb-q-success h3 { font-family: var(--f-display); color: var(--ink); font-size: 26px; }
html body .cb-quote-modal .cb-q-success p { color: var(--ink-2); }

@media (max-width: 640px) {
	html body .cb-quote-modal-card { border-radius: var(--r-lg) var(--r-lg) 0 0; }
	html body .cb-quote-modal .cb-q-dot, html body .cb-quote-modal .cb-q-dot:is(:hover, :focus, :active) { width: 26px !important; height: 26px !important; font-size: 11px !important; }
	html body .cb-quote-modal .cb-q-btn { width: 100%; }
}

/* =============================================================================
   CB Jobs — open positions, the single job page and the application form
   ========================================================================== */
html body .cb-page .cb-jobs-wrap,
html body .cb-page .cb-jobs-general-wrap { max-width: none; margin: 0; padding: 0; }
html body .cb-jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
html body .cb-job-card {
	display: block; padding: 28px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface);
	color: var(--ink); text-decoration: none; box-shadow: none; transform: none; transition: border-color .3s ease;
}
html body .cb-job-card:hover { border-color: color-mix(in srgb, var(--ink) 40%, transparent); box-shadow: none; transform: none; }
html body :is(.cb-job-dept, .cb-job-single-tag) {
	display: inline-block; padding: 0; margin-bottom: 12px; border-radius: 0; background: none;
	font: 500 11px/1.4 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
html body :is(.cb-job-title, .cb-job-h2, .cb-job-h3) { font-family: var(--f-display); font-weight: 400; color: var(--ink); }
html body .cb-job-title { font-size: 26px; }
html body :is(.cb-job-excerpt, .cb-job-list li) { color: var(--ink-2); }
html body .cb-job-meta { color: var(--muted); }
html body .cb-job-arrow { font: 500 12px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
html body :is(.cb-job-single-meta, .cb-job-single-apply, .cb-jobs-empty) {
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none;
}
html body .cb-job-single-metagrid strong { font-weight: 500; color: var(--muted); }
html body .cb-job-single-metagrid span { color: var(--ink); }
html body .cb-job-closed { border-radius: var(--r); background: var(--bg-2); border-left-color: var(--muted); color: var(--ink-2); }
html body .cb-jobs-empty h3 { font-family: var(--f-display); font-weight: 400; color: var(--ink); }
html body .cb-jobs-empty p { color: var(--ink-2); }

/* the form */
html body .cb-apply-form { display: flex; flex-direction: column; gap: 18px; }
html body .cb-apply-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
html body .cb-apply-field { display: flex; flex-direction: column; gap: 8px; }
html body .cb-apply-field > span { margin: 0; font: 500 11.5px/1.4 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
html body .cb-apply-field > span em { font-style: normal; color: var(--accent); }
html body .cb-apply-field > span small { margin-left: 4px; letter-spacing: 0; text-transform: none; color: var(--muted); }
html body .cb-apply-field :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
	min-height: 50px; padding: 13px 16px; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent) !important; border-radius: var(--r) !important;
	background: var(--bg) !important; color: var(--ink) !important; font: 400 15px/1.4 var(--f-ui) !important; box-shadow: none !important;
}
html body .cb-apply-field textarea { min-height: 130px; }
html body .cb-apply-field :is(input, select, textarea):focus {
	outline: none; border-color: var(--gold) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent) !important;
}
html body .cb-apply-file input[type="file"] {
	min-height: 54px; padding: 8px 10px; border: 1px dashed color-mix(in srgb, var(--ink) 26%, transparent) !important; border-radius: var(--r) !important;
	background: var(--bg) !important; color: var(--ink-2) !important; font: 400 13px/1.3 var(--f-ui) !important;
}
html body .cb-apply-file input[type="file"]::file-selector-button {
	margin-right: 12px; padding: 9px 18px; border: 0; border-radius: 999px; background: var(--ink); background-image: none; color: var(--bg);
	font: 500 11.5px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; box-shadow: none; cursor: pointer;
}
html body .cb-apply-file input[type="file"]::-webkit-file-upload-button {
	margin-right: 12px; padding: 9px 18px; border: 0; border-radius: 999px; background: var(--ink); background-image: none; color: var(--bg);
	font: 500 11.5px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; box-shadow: none; cursor: pointer;
}
html body .cb-apply-role { border-radius: 0 var(--r) var(--r) 0; border-left: 2px solid var(--accent); background: var(--bg); color: var(--ink); }
html body .cb-apply-error { border-radius: var(--r); background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); }
html body .cb-apply-success { border-radius: var(--r); }

/* the two buttons: the theme's pill in every state */
html body :is(.cb-apply-submit, .cb-jobs-open-general, .cb-jobs-empty .cb-btn-primary),
html body :is(.cb-apply-submit, .cb-jobs-open-general, .cb-jobs-empty .cb-btn-primary):is(:hover, :focus, :focus-visible, :active) {
	display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; align-self: flex-start;
	height: 54px !important; min-height: 0 !important; padding: 0 30px !important; margin: 0 !important;
	border: 0 !important; border-radius: 999px !important; background: var(--accent) !important; background-image: none !important;
	color: var(--on-accent) !important; font: 500 13.5px/1 var(--f-ui) !important; letter-spacing: .08em !important; text-transform: uppercase !important;
	box-shadow: none !important; transform: none !important; cursor: pointer;
}
html body :is(.cb-apply-submit, .cb-jobs-open-general, .cb-jobs-empty .cb-btn-primary):is(:hover, :focus-visible) { background: var(--accent-deep) !important; }

@media (max-width: 640px) {
	html body .cb-apply-row { grid-template-columns: 1fr; }
	html body .cb-jobs-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   Christmas collection (CB Quote Requests → [cb_xmas_collection]) on the theme's
   Christmas page. The legacy styles force their look with "html body … !important";
   the extra .cb-page--xmas here outranks them. Designs read like a printed catalogue:
   the picture, its reference, its name and one clear button — no card boxes, no lift.
   ========================================================================== */
html body .cb-page--xmas .cb-xmas-wrap { padding: 0; max-width: none; }

/* filters */
html body .cb-page--xmas .cb-xmas-filters { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin: 0 0 30px; }
html body .cb-page--xmas .cb-xmas-filter,
html body .cb-page--xmas .cb-xmas-filter:is(:hover, :focus, :active) {
	height: 40px !important; padding: 0 18px !important; margin: 0 !important; border-radius: 999px !important;
	border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent) !important; background: transparent !important; background-image: none !important;
	color: var(--ink) !important; font: 500 13px/1 var(--f-ui) !important; letter-spacing: .04em; box-shadow: none !important; transform: none !important;
}
html body .cb-page--xmas .cb-xmas-filter:is(:hover, :focus-visible) { border-color: var(--ink) !important; }
html body .cb-page--xmas .cb-xmas-filter.is-active { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--bg) !important; }
html body .cb-page--xmas .cb-xmas-filter-count { background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; }

/* the grid: five across, two on phones */
html body .cb-page--xmas .cb-xmas-grid,
html body .cb-page--xmas .cb-xmas-grid[data-columns] { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 34px 18px !important; }

/* a design: picture, reference, name, one button */
html body .cb-page--xmas .cb-xmas-grid article.cb-xmas-card,
html body .cb-page--xmas .cb-xmas-grid article.cb-xmas-card:hover {
	background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
	transform: none !important; overflow: visible !important; color: var(--ink) !important;
}
html body .cb-page--xmas article.cb-xmas-card button.cb-xmas-card-media {
	aspect-ratio: 4 / 5 !important; border-radius: var(--r) !important; background: #efe7dd !important;
	box-shadow: 0 1px 0 var(--line), 0 20px 40px -30px rgba(40, 20, 10, .45) !important;
}
html body .cb-page--xmas article.cb-xmas-card:hover .cb-xmas-card-media img { transform: scale(1.04) !important; }
html body .cb-page--xmas .cb-xmas-card-ref {
	top: 10px; left: 10px; padding: 4px 8px; border-radius: 4px; background: rgba(255, 252, 247, .9); color: #2a211c;
	font: 500 10px/1 var(--f-ui); letter-spacing: .14em; backdrop-filter: none; -webkit-backdrop-filter: none;
}
html body .cb-page--xmas .cb-xmas-card-cat { display: none; }
html body .cb-page--xmas article.cb-xmas-card .cb-xmas-card-body {
	background: transparent !important; padding: 12px 0 0 !important; gap: 10px !important; color: var(--ink) !important;
}
html body .cb-page--xmas article.cb-xmas-card .cb-xmas-card-title,
html body .cb-page--xmas article.cb-xmas-card .cb-xmas-card-title * {
	font: 500 14px/1.3 var(--f-ui) !important; letter-spacing: .01em !important; color: var(--ink) !important; -webkit-text-fill-color: currentColor !important;
}
html body .cb-page--xmas article.cb-xmas-card .cb-xmas-card-desc { display: none !important; }

/* the button: outlined at rest, filled once the design is in the selection; same pill in every state */
html body .cb-page--xmas .cb-xmas-card .cb-xmas-add,
html body .cb-page--xmas .cb-xmas-card .cb-xmas-add:is(:hover, :focus, :active),
html body .cb-page--xmas .cb-xmas-card .cb-xmas-add.is-added,
html body .cb-page--xmas .cb-xmas-card .cb-xmas-add.is-added:is(:hover, :focus, :active) {
	width: 100%; height: 40px !important; min-height: 0 !important; margin: 0 !important; padding: 0 12px !important; border-radius: 999px !important;
	border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent) !important; background: transparent !important; background-image: none !important;
	color: var(--ink) !important; font: 500 11.5px/1 var(--f-ui) !important; letter-spacing: .1em !important; text-transform: uppercase !important;
	box-shadow: none !important; transform: none !important;
}
html body .cb-page--xmas .cb-xmas-card .cb-xmas-add:is(:hover, :focus-visible) { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--bg) !important; }
html body .cb-page--xmas .cb-xmas-card .cb-xmas-add.is-added,
html body .cb-page--xmas .cb-xmas-card .cb-xmas-add.is-added:is(:hover, :focus-visible) { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent) !important; }
html body .cb-page--xmas article.cb-xmas-card:has(.cb-xmas-add.is-added) button.cb-xmas-card-media { box-shadow: 0 0 0 2px var(--accent), 0 20px 40px -30px rgba(40, 20, 10, .45) !important; }

/* load more */
html body .cb-page--xmas .cb-xmas-loadmore-wrap { margin-top: 44px; text-align: center; }
html body .cb-page--xmas .cb-xmas-loadmore,
html body .cb-page--xmas .cb-xmas-loadmore:is(:hover, :focus, :active) {
	display: inline-flex !important; align-items: center; gap: 10px; height: 52px !important; padding: 0 26px !important; margin: 0 !important;
	border-radius: 999px !important; border: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent) !important; background: transparent !important;
	background-image: none !important; color: var(--ink) !important; font: 500 13px/1 var(--f-ui) !important; letter-spacing: .08em !important;
	text-transform: uppercase !important; box-shadow: none !important; transform: none !important;
}
html body .cb-page--xmas .cb-xmas-loadmore:is(:hover, :focus-visible) { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--bg) !important; }
html body .cb-page--xmas .cb-xmas-loadmore svg { width: 16px; height: 16px; }

/* the selection bar: one dark pill at the bottom centre while designs are selected */
html body .cb-page--xmas .cb-xmas-drawer-recall,
html body .cb-page--xmas .cb-xmas-drawer-recall:hover {
	left: 50%; right: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
	padding: 8px 8px 8px 22px; gap: 14px; border: 0; border-radius: 999px; background: #1d1412; color: #f6f0e6;
	font: 500 13px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .55);
}
html body .cb-page--xmas .cb-xmas-drawer-recall:hover { background: var(--accent); color: #fff8ef; }
html body .cb-page--xmas .cb-xmas-drawer-recall[hidden] { display: none; }
html body .cb-page--xmas .cb-xmas-drawer-recall-count,
html body .cb-page--xmas .cb-xmas-drawer-recall:hover .cb-xmas-drawer-recall-count {
	min-width: 34px; height: 34px; padding: 0 10px; border-radius: 999px; background: var(--accent); background-image: none; color: #fff8ef; font: 600 13px/1 var(--f-ui);
}
html body .cb-page--xmas .cb-xmas-drawer-recall:hover .cb-xmas-drawer-recall-count { background: #fff8ef; color: var(--accent); }
@keyframes cbXmasRecallPop { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }

/* drawer, design settings and request forms: same buttons as the rest of the site */
html body .cb-page--xmas :is(.cb-xmas-drawer-submit, .cb-xmas-add-confirm, .cb-xmas-req-submit),
html body .cb-page--xmas :is(.cb-xmas-drawer-submit, .cb-xmas-add-confirm, .cb-xmas-req-submit):is(:hover, :focus, :active) {
	border-radius: 999px !important; background: var(--accent) !important; background-image: none !important; color: var(--on-accent) !important;
	border: 0 !important; box-shadow: none !important; transform: none !important; font-family: var(--f-ui) !important;
}
html body .cb-page--xmas :is(.cb-xmas-drawer-submit, .cb-xmas-add-confirm, .cb-xmas-req-submit):is(:hover, :focus-visible) { background: var(--accent-deep) !important; }
html body .cb-page--xmas :is(.cb-xmas-add-cancel, .cb-xmas-req-back),
html body .cb-page--xmas :is(.cb-xmas-add-cancel, .cb-xmas-req-back):is(:hover, :focus, :active) {
	border-radius: 999px !important; background: transparent !important; background-image: none !important; color: #2a211c !important;
	border: 1.5px solid rgba(42, 33, 28, .3) !important; box-shadow: none !important; transform: none !important; font-family: var(--f-ui) !important;
}
html body .cb-page--xmas :is(.cb-xmas-add-cancel, .cb-xmas-req-back):is(:hover, :focus-visible) { background: #2a211c !important; border-color: #2a211c !important; color: #fff8ef !important; }
html body .cb-page--xmas :is(.cb-xmas-drawer-panel, .cb-xmas-add-card, .cb-xmas-req-card) { border-radius: var(--r-lg) !important; }
html body .cb-page--xmas .cb-xmas-drawer-panel { border-radius: var(--r-lg) 0 0 var(--r-lg) !important; }
html body .cb-page--xmas :is(.cb-xmas-add-heading, .cb-xmas-req-heading, #cb-xmas-drawer-title) em { font-style: normal; background: none; -webkit-text-fill-color: currentColor; color: var(--accent); }

@media (max-width: 1180px) {
	html body .cb-page--xmas .cb-xmas-grid, html body .cb-page--xmas .cb-xmas-grid[data-columns] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
	html body .cb-page--xmas .cb-xmas-grid, html body .cb-page--xmas .cb-xmas-grid[data-columns] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
	html body .cb-page--xmas .cb-xmas-grid, html body .cb-page--xmas .cb-xmas-grid[data-columns] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 26px 12px !important; }
	/* filters scroll sideways instead of wrapping into a tall block */
	html body .cb-page--xmas .cb-xmas-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter); }
	html body .cb-page--xmas .cb-xmas-filters::-webkit-scrollbar { display: none; }
	html body .cb-page--xmas .cb-xmas-filter { flex: 0 0 auto; }
	html body .cb-page--xmas .cb-xmas-card .cb-xmas-add { font-size: 10.5px !important; letter-spacing: .06em !important; }
	html body .cb-page--xmas .cb-xmas-drawer-panel { border-radius: var(--r-lg) var(--r-lg) 0 0 !important; }
}

/* the page head already sets the scene: no extra ribbon band above the designs */
html body .cb-page--xmas .cb-xmas-wrap::before,
html body .cb-page--xmas .cb-xmas-wrap::after { content: none !important; display: none !important; }
/* the two buttons in the design settings window: same size, side by side */
html body .cb-page--xmas :is(.cb-xmas-add-cancel, .cb-xmas-add-confirm),
html body .cb-page--xmas :is(.cb-xmas-add-cancel, .cb-xmas-add-confirm):is(:hover, :focus, :active) {
	display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
	width: auto !important; min-width: 120px; height: 48px !important; padding: 0 22px !important;
	font: 500 12.5px/1 var(--f-ui) !important; letter-spacing: .08em !important; text-transform: uppercase !important;
}
html body .cb-page--xmas .cb-xmas-drawer-recall,
html body .cb-page--xmas .cb-xmas-drawer-recall:hover { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; white-space: nowrap !important; }
/* the enlarge icon sits small in the corner instead of over the middle of the design */
html body .cb-page--xmas article.cb-xmas-card .cb-xmas-card-zoom {
	top: 8px !important; right: 8px !important; left: auto !important; bottom: auto !important; width: 30px !important; height: 30px !important;
	transform: none !important; margin: 0 !important; border-radius: 50% !important; background: rgba(255, 252, 247, .9) !important; color: #2a211c !important;
}
html body .cb-page--xmas article.cb-xmas-card .cb-xmas-card-zoom svg { width: 15px !important; height: 15px !important; }

/* the button's words share a class with the form labels (dark ink, block, margin): let them
   take the button's own colour so they stay readable on hover and when selected */
html body .cb-page--xmas .cb-xmas-card .cb-xmas-add .cb-xmas-add-label {
	color: inherit !important; margin: 0 !important; font: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important;
}
/* close buttons: round, the cross centred (Elementor's button padding stretched them into ovals) */
html body .cb-page--xmas :is(.cb-xmas-lightbox-close, .cb-xmas-drawer-close, .cb-xmas-add-close, .cb-xmas-req-close) {
	display: grid !important; place-items: center !important; width: 44px !important; height: 44px !important; min-width: 0 !important; min-height: 0 !important;
	padding: 0 !important; border-radius: 50% !important; line-height: 1 !important; box-shadow: none !important;
}
html body .cb-page--xmas .cb-xmas-lightbox .cb-xmas-lightbox-close {
	top: calc(18px + env(safe-area-inset-top, 0px)) !important; right: 18px !important;
	background: rgba(255, 255, 255, .14) !important; border: 1px solid rgba(255, 255, 255, .4) !important; color: #fff !important;
}
html body .cb-page--xmas .cb-xmas-lightbox .cb-xmas-lightbox-close:hover { background: #fff !important; color: #1d1412 !important; transform: none !important; }
html body .cb-page--xmas :is(.cb-xmas-lightbox-close, .cb-xmas-drawer-close, .cb-xmas-add-close, .cb-xmas-req-close) svg { width: 18px !important; height: 18px !important; }