/* legacy-components.css — copied from the printing-child stylesheet on 2026-10-18.
 * Styles for markup printed by the CB Quote Requests plugin (quote wizard modal,
 * Christmas collection + drawer). The new theme owns this copy from now on. */

/* =========================================================
   CB-QUOTE WIZARD — modal popup with 5-step form
   ========================================================= */

/* Lock body scroll when the modal is open */
body.cb-quote-locked {
    overflow: hidden !important;
}

/* Backdrop + container */
.cb-quote-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483645;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(20, 12, 8, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.cb-quote-modal.is-open {
    display: flex;
    opacity: 1;
    animation: cbQuoteFadeIn 0.3s ease both;
}
@keyframes cbQuoteFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* The white card */
.cb-quote-modal-card {
    position: relative;
    width: 100%;
    max-width: 760px;
    max-height: calc(100vh - 48px);
    background: #FFFDFA;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 60px 110px -40px rgba(20, 12, 8, 0.65),
        0 20px 50px -20px rgba(20, 12, 8, 0.40);
    border: 1px solid rgba(235, 224, 213, 0.6);
    font-family: 'Rubrik', system-ui, -apple-system, sans-serif;
    color: #2A211C;
    transform: translateY(20px) scale(0.98);
    animation: cbQuoteSlideUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s both;
}
@keyframes cbQuoteSlideUp {
    0%   { transform: translateY(20px) scale(0.98); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
.cb-quote-modal.cb-q-shake .cb-quote-modal-card {
    animation: cbQuoteShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes cbQuoteShake {
    10%, 90% { transform: translateX(-4px); }
    20%, 80% { transform: translateX(6px); }
    30%, 50%, 70% { transform: translateX(-8px); }
    40%, 60% { transform: translateX(8px); }
}

/* Decorative gradient bar at the top edge of the card */
.cb-quote-modal-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
    z-index: 2;
}

/* Close X button — high-specificity overrides so parent theme button
   styles (red bg, hidden SVG) can't bleed through */
html body .cb-quote-modal .cb-quote-modal-close,
html body button.cb-quote-modal-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 10 !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 1.5px solid #EBE0D5 !important;
    background: #FFFDFA !important;
    background-image: none !important;
    color: #2A211C !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease, color 0.2s ease, transform 0.3s ease, border-color 0.2s ease !important;
    box-shadow: 0 4px 12px -4px rgba(82, 48, 32, 0.30) !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
}
html body .cb-quote-modal .cb-quote-modal-close:hover,
html body button.cb-quote-modal-close:hover {
    background: #A01D22 !important;
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    transform: rotate(90deg) !important;
}
html body .cb-quote-modal .cb-quote-modal-close svg,
html body button.cb-quote-modal-close svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    stroke: currentColor !important;
    fill: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}
html body .cb-quote-modal .cb-quote-modal-close svg line,
html body button.cb-quote-modal-close svg line {
    stroke: currentColor !important;
}
html body .cb-quote-modal .cb-quote-modal-close::before,
html body .cb-quote-modal .cb-quote-modal-close::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: none !important;
}

/* Header */
.cb-q-header {
    padding: 36px 36px 16px;
    flex: none;
}
.cb-q-header .cb-quote-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #A01D22;
    margin: 0 0 12px 0;
}
.cb-q-header .cb-quote-eyebrow::before {
    content: "";
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
}
.cb-q-header h2 {
    font-family: 'Glitten', Georgia, serif;
    font-weight: 400;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.06;
    letter-spacing: -0.018em;
    color: #2A211C;
    margin: 0 0 8px 0;
}
.cb-q-header h2 em {
    font-style: italic;
    background-image: linear-gradient(125deg, #E0473C 0%, #A01D22 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.cb-q-tagline {
    font-size: 14px;
    line-height: 1.5;
    color: #4A3F38;
    margin: 0;
}

/* Progress */
.cb-q-progress {
    padding: 0 36px 18px;
    flex: none;
}
.cb-q-progress-track {
    width: 100%;
    height: 4px;
    background: #F6EEE4;
    border-radius: 2px;
    overflow: hidden;
}
.cb-q-progress-bar {
    height: 100%;
    width: 20%;
    background-image: linear-gradient(90deg, #E0473C, #C8252B, #A01D22);
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cb-q-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-family: 'Rubrik', sans-serif;
}
.cb-q-step-counter {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8A7B70;
}
.cb-q-step-label {
    font-family: 'Glitten', serif;
    font-size: 14px;
    color: #2A211C;
}
.cb-q-dots {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    justify-content: center;
}
.cb-q-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #F6EEE4;
    border: 1.5px solid #EBE0D5;
    color: #B3A89E;
    font-family: 'Rubrik', sans-serif;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    padding: 0;
}
.cb-q-dot.is-done {
    background: #FCE9DF;
    border-color: #FAD9C9;
    color: #A01D22;
    cursor: pointer;
}
.cb-q-dot.is-active {
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
    border-color: transparent;
    color: #fff;
    transform: scale(1.12);
    box-shadow: 0 6px 14px -4px rgba(168, 29, 34, 0.55);
}
.cb-q-dot:not(.is-active):not(.is-done) {
    cursor: not-allowed;
}

/* Body / scroll region */
.cb-q-body {
    padding: 8px 36px 36px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

/* Steps — only the active one is visible */
.cb-q-step {
    display: none;
    flex-direction: column;
    gap: 18px;
    animation: cbQStepIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.cb-q-step.is-active {
    display: flex;
}
@keyframes cbQStepIn {
    0%   { opacity: 0; transform: translateX(20px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* Field rows + columns */
.cb-q-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.cb-q-field {
    display: flex;
    flex-direction: column;
}
.cb-q-field > span:first-child {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #2A211C;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.cb-q-field > span:first-child em {
    color: #C8252B;
    font-style: normal;
    margin-left: 2px;
}
.cb-q-field > span:first-child small {
    font-weight: 500;
    color: #8A7B70;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11.5px;
    margin-left: 8px;
}
.cb-q-field input,
.cb-q-field select,
.cb-q-field textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1.5px solid #EBE0D5;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14.5px;
    color: #2A211C;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}
.cb-q-field input:hover,
.cb-q-field select:hover,
.cb-q-field textarea:hover {
    border-color: #FAD9C9;
}
.cb-q-field input:focus,
.cb-q-field select:focus,
.cb-q-field textarea:focus {
    outline: none;
    border-color: #C8252B;
    box-shadow: 0 0 0 4px rgba(200, 37, 43, 0.10);
}
.cb-q-field input.is-invalid,
.cb-q-field select.is-invalid,
.cb-q-field textarea.is-invalid {
    border-color: #C8252B;
    box-shadow: 0 0 0 4px rgba(200, 37, 43, 0.10);
    animation: cbQuoteShakeField 0.3s ease both;
}
@keyframes cbQuoteShakeField {
    25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    75% { transform: translateX(-2px); }
}
.cb-q-field textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.55;
}

/* Finishing checkbox grid */
.cb-q-checks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.cb-q-check {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FBF6EF;
    border: 1.5px solid #EBE0D5;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #4A3F38;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    user-select: none;
}
.cb-q-check:hover {
    border-color: #E0473C;
    background: #fff;
    transform: translateY(-1px);
}
.cb-q-check input {
    width: 16px;
    height: 16px;
    flex: none;
    accent-color: #C8252B;
    margin: 0;
    cursor: pointer;
}
.cb-q-check:has(input:checked) {
    border-color: #C8252B;
    background: #fff;
    color: #2A211C;
    box-shadow: 0 4px 10px -4px rgba(200, 37, 43, 0.25);
}

/* Grouped finishing sub-sections (Lamination, Additional Technique, etc.) */
.cb-q-group {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px dashed #EBE0D5;
}
.cb-q-group:last-of-type {
    border-bottom: 0;
    padding-bottom: 4px;
    margin-bottom: 4px;
}
.cb-q-group-label {
    font-size: 11px;
    font-weight: 700;
    color: #8A7B70;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin-bottom: 10px;
}
.cb-q-other-input {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 10px 12px;
    background: #FBF6EF;
    border: 1.5px solid #EBE0D5;
    border-radius: 10px;
    font-size: 13px;
    color: #2A211C;
    box-sizing: border-box;
    font-family: inherit;
}
.cb-q-other-input:focus {
    outline: none;
    border-color: #C8252B;
    background: #fff;
}

/* Stacked variant — two big cards side by side (Final Product Format) */
.cb-q-checks-stacked {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.cb-q-check-desc {
    align-items: flex-start;
    padding: 14px 16px;
}
.cb-q-check-desc > span {
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.4;
}
.cb-q-check-desc small {
    font-size: 11.5px;
    color: #8A7B70;
    font-weight: 400;
}

/* Info card (Approximate Production Time on step 4) */
.cb-q-info-card {
    background: linear-gradient(135deg, #FBF6EF 0%, #FCE9DF 100%);
    border: 1.5px solid #EBE0D5;
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 22px;
    text-align: center;
}
.cb-q-info-label {
    font-size: 10.5px;
    font-weight: 700;
    color: #A01D22;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}
.cb-q-info-value {
    font-family: 'Glitten', 'Playfair Display', Georgia, serif;
    font-size: 26px;
    color: #2A211C;
    line-height: 1.15;
    margin-bottom: 6px;
}
.cb-q-info-note {
    display: block;
    font-size: 12px;
    color: #7A6558;
    font-style: italic;
    margin-top: 4px;
}
.cb-q-media-intro {
    font-size: 13.5px;
    color: #4A3F38;
    line-height: 1.55;
    margin: 6px 0 14px;
    text-align: center;
}

/* Three-column file row (step 4 media grid) */
.cb-q-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

/* Short helper text under a field */
.cb-q-hint {
    display: block;
    font-size: 11.5px;
    color: #8A7B70;
    font-style: italic;
    margin-top: 4px;
    line-height: 1.4;
}
/* Small helper appended inline to a field label (e.g. "(MOQ 100 pcs)") */
.cb-q-hint-inline {
    font-size: 11px;
    color: #8A7B70;
    font-style: italic;
    font-weight: 400;
    margin-left: 6px;
    letter-spacing: 0.02em;
}
.cb-q-hint-inline:empty { display: none; }
/* Sub-label under a file input's title (e.g. Reference Image description) */
.cb-q-file-sub {
    display: block;
    font-size: 11.5px;
    color: #8A7B70;
    font-style: italic;
    margin: 2px 0 8px;
    line-height: 1.4;
}

/* Inline field error message (instant validation feedback) */
.cb-q-error-msg {
    display: block;
    font-size: 11.5px;
    color: #C8252B;
    margin-top: 4px;
    line-height: 1.4;
    font-weight: 500;
    animation: cb-q-error-slide 200ms ease-out;
}
@keyframes cb-q-error-slide {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cb-q-field.is-valid input:not([type="file"]),
.cb-q-field.is-valid select {
    border-color: #4CAF50;
}
.cb-q-field.is-invalid input:not([type="file"]),
.cb-q-field.is-invalid select {
    border-color: #C8252B;
    background: #FDECEC;
}

/* File drop zones */
.cb-q-file-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #2A211C;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.cb-q-file-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 18px 14px;
    border: 1.5px dashed #EBE0D5;
    border-radius: 12px;
    background: #FBF6EF;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    gap: 6px;
}
.cb-q-file-drop:hover {
    border-color: #C8252B;
    background: #fff;
    transform: translateY(-1px);
}
.cb-q-file-drop input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.cb-q-file-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #FCE9DF;
    color: #A01D22;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.cb-q-file-icon svg { width: 18px; height: 18px; }
.cb-q-file-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #2A211C;
    line-height: 1.3;
}
.cb-q-file-drop small {
    font-size: 11.5px;
    color: #8A7B70;
    font-style: italic;
}
.cb-q-file.has-file .cb-q-file-drop {
    border-style: solid;
    border-color: #C8252B;
    background: #FFFDFA;
}
.cb-q-file.has-file .cb-q-file-icon {
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
    color: #fff;
}

/* Recommendation support box */
.cb-q-support {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: linear-gradient(135deg, #FBF6EF 0%, #FCE9DF 100%);
    border: 1.5px solid #EBE0D5;
    padding: 16px 18px;
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.cb-q-support:hover {
    border-color: #C8252B;
    transform: translateY(-1px);
}
.cb-q-support input {
    width: 20px;
    height: 20px;
    accent-color: #C8252B;
    margin-top: 2px;
    flex: none;
}
.cb-q-support span {
    font-size: 13.5px;
    line-height: 1.5;
    color: #4A3F38;
}
.cb-q-support strong {
    color: #2A211C;
    font-weight: 600;
}

/* Error message */
.cb-q-error {
    display: none;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(200, 37, 43, 0.08);
    border-left: 3px solid #C8252B;
    color: #A01D22;
    font-size: 13.5px;
    line-height: 1.4;
}
.cb-q-error.is-visible {
    display: block;
}

/* Nav row (back / continue) */
.cb-q-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

/* Buttons */
.cb-q-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-family: 'Rubrik', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.25s ease,
                border-radius 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                background 0.25s ease,
                color 0.25s ease;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    line-height: 1;
    min-width: 130px;
}
.cb-q-btn svg { width: 16px; height: 16px; }
.cb-q-btn-primary {
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
    color: #fff;
    box-shadow: 0 12px 26px -10px rgba(168, 29, 34, 0.55);
}
.cb-q-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -12px rgba(168, 29, 34, 0.65);
}
.cb-q-btn-primary:active { transform: translateY(0) scale(0.98); }
.cb-q-btn-ghost {
    background: rgba(255, 253, 250, 0.6);
    color: #2A211C;
    border-color: #EBE0D5;
}
.cb-q-btn-ghost:hover {
    border-color: #C8252B;
    color: #A01D22;
    background: rgba(200, 37, 43, 0.04);
}

/* One shape in every state (the theme's plugins.css styles these buttons) */
html body .cb-quote-modal .cb-q-btn,
html body .cb-quote-modal button.cb-q-btn {
    border-radius: 999px !important;
}

/* Submit loading spinner */
.cb-q-submit { position: relative; }
.cb-q-btn-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    animation: cbQuoteSpin 0.7s linear infinite;
}
.cb-q-submit.is-loading .cb-q-btn-text { opacity: 0.6; }
.cb-q-submit.is-loading .cb-q-btn-spinner { display: inline-block; }
@keyframes cbQuoteSpin {
    to { transform: rotate(360deg); }
}

/* Success screen */
.cb-q-success {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 0 12px;
    animation: cbQStepIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.cb-q-success.is-visible { display: flex; }
.cb-q-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 18px 36px -12px rgba(168, 29, 34, 0.55);
    animation: cbQSuccessPop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
}
@keyframes cbQSuccessPop {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.cb-q-success-icon svg { width: 32px; height: 32px; }
.cb-q-success h3 {
    font-family: 'Glitten', serif;
    font-weight: 400;
    font-size: 22px;
    color: #2A211C;
    margin: 0 0 10px 0;
    letter-spacing: -0.01em;
}
.cb-q-success p {
    font-size: 14.5px;
    line-height: 1.5;
    color: #4A3F38;
    max-width: 380px;
    margin: 0 0 24px 0;
}
.cb-q-success .cb-q-nav {
    width: 100%;
    margin-top: 0;
    justify-content: center;
}

/* MOBILE */
@media (max-width: 640px) {
    .cb-quote-modal { padding: 12px; align-items: flex-end; }
    .cb-quote-modal-card {
        max-height: calc(100vh - 24px);
        border-radius: 20px;
    }
    .cb-q-header { padding: 28px 22px 14px; }
    .cb-q-progress { padding: 0 22px 14px; }
    .cb-q-body { padding: 4px 22px 24px; }
    .cb-q-header h2 { font-size: 22px; }
    .cb-q-row { grid-template-columns: 1fr; gap: 14px; }
    .cb-q-row-3 { grid-template-columns: 1fr; gap: 14px; }
    .cb-q-checks { grid-template-columns: 1fr 1fr; }
    .cb-q-checks-stacked { grid-template-columns: 1fr; }
    .cb-q-info-value { font-size: 22px; }
    .cb-q-dots { gap: 4px; }
    .cb-q-dot { width: 24px; height: 24px; font-size: 10px; }
    .cb-q-nav {
        flex-direction: column-reverse;
        gap: 10px;
    }
    .cb-q-btn { width: 100%; min-width: 0; }
    .cb-quote-modal-close { top: 12px; right: 12px; width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    .cb-quote-modal,
    .cb-quote-modal-card,
    .cb-q-step,
    .cb-q-success,
    .cb-q-success-icon,
    .cb-q-progress-bar,
    .cb-q-btn,
    .cb-q-btn-spinner {
        animation: none !important;
        transition: none !important;
    }
}


/* =========================================================
 * CHRISTMAS COLLECTION
 * Seasonal packaging portfolio. Two surfaces:
 *  - [cb_xmas_banner]     — homepage seasonal alert (uses the
 *                            pre-rendered "no-buttons" hero PNG,
 *                            overlays a red CTA pill bottom-center)
 *  - [cb_xmas_collection] — filterable grid of design cards, each
 *                            with a "Request Quote for This Design"
 *                            button that opens the existing wizard.
 * ========================================================= */

/* -------- Homepage banner -------- */
.cb-xmas-banner {
    position: relative;
    display: block;
    max-width: 1240px;
    margin: 22px auto;
    border-radius: 22px;
    overflow: hidden;
    text-decoration: none !important;
    background: #FBF6EF;
    box-shadow: 0 30px 60px -30px rgba(120, 60, 38, .40);
    line-height: 0; /* kill inline-image whitespace so image fills flush */
    isolation: isolate; /* new stacking context so the CTA pill can layer above */
}
.cb-xmas-banner picture {
    display: block;
    width: 100%;
    line-height: 0;
}
.cb-xmas-banner img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    /* Slow ken-burns feel on hover — subtle, doesn't distract from CTA */
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.cb-xmas-banner:hover img { transform: scale(1.015); }
.cb-xmas-banner-cta {
    position: absolute;
    left: 50%;
    bottom: 6%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
    color: #FFFFFF !important;
    font-family: 'Rubrik', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 999px;
    box-shadow: 0 22px 40px -14px rgba(168, 29, 34, .55);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
    z-index: 2;
    line-height: 1;
    white-space: nowrap;
}
.cb-xmas-banner-cta > span {
    font-size: 20px;
    line-height: 1;
    margin-top: -1px;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.cb-xmas-banner:hover .cb-xmas-banner-cta {
    transform: translateX(-50%) translateY(-3px);
    box-shadow: 0 28px 48px -16px rgba(168, 29, 34, .70);
}
.cb-xmas-banner:hover .cb-xmas-banner-cta > span {
    transform: translateX(4px);
}
@media (max-width: 768px) {
    .cb-xmas-banner { margin: 14px auto; border-radius: 16px; }
    .cb-xmas-banner-cta {
        bottom: 4%;
        padding: 12px 22px;
        font-size: 12.5px;
        letter-spacing: .06em;
    }
    .cb-xmas-banner-cta > span { font-size: 16px; }
}
@media (max-width: 480px) {
    /* Below 480 the pretty banner text becomes unreadable at scale.
       Reserve some contrast + shrink the CTA so it stays tappable. */
    .cb-xmas-banner-cta {
        bottom: 8px;
        padding: 10px 18px;
        font-size: 11.5px;
    }
}

/* -------- Collection page shell -------- */
.cb-xmas-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 30px 20px 60px;
    font-family: 'Rubrik', sans-serif;
    color: #2A211C;
}

/* -------- Category filter chips -------- */
.cb-xmas-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
    justify-content: center;
}
.cb-xmas-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #ffffff;
    border: 1.5px solid #EBE0D5;
    border-radius: 999px;
    font-family: 'Rubrik', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #4A3F38;
    cursor: pointer;
    transition: all .25s cubic-bezier(.2, .8, .2, 1);
    line-height: 1;
}
.cb-xmas-filter:hover {
    border-color: #C8252B;
    color: #A01D22;
    transform: translateY(-1px);
}
.cb-xmas-filter.is-active {
    background: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 8px 18px -6px rgba(168, 29, 34, .45);
}
.cb-xmas-filter-count {
    display: inline-block;
    background: rgba(0, 0, 0, .06);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    min-width: 22px;
    text-align: center;
}
.cb-xmas-filter.is-active .cb-xmas-filter-count {
    background: rgba(255, 255, 255, .22);
    color: #ffffff;
}

/* -------- Grid -------- */
.cb-xmas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}
.cb-xmas-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
.cb-xmas-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1080px) {
    .cb-xmas-grid,
    .cb-xmas-grid[data-columns="4"] { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
    .cb-xmas-grid,
    .cb-xmas-grid[data-columns="4"],
    .cb-xmas-grid[data-columns="2"] { grid-template-columns: 1fr; gap: 18px; }
}

/* -------- Card -------- */
.cb-xmas-card {
    background: #ffffff;
    border: 1px solid #EBE0D5;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .35s;
    box-shadow: 0 6px 20px -8px rgba(82, 48, 32, .18);
}
.cb-xmas-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px -22px rgba(120, 60, 38, .40);
    border-color: transparent;
}

/* Media — square aspect, cover crop, subtle zoom on hover */
.cb-xmas-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #FBF6EF;
}
.cb-xmas-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.cb-xmas-card:hover .cb-xmas-card-media img {
    transform: scale(1.06);
}
.cb-xmas-card-ref {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(42, 33, 28, .82);
    color: #FBF6EF;
    font-family: Consolas, Menlo, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    padding: 5px 10px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.cb-xmas-card-cat {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, .95);
    color: #2A211C;
    font-family: 'Rubrik', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Body */
.cb-xmas-card-body {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.cb-xmas-card-title {
    font-family: 'Glitten', serif !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
    color: #2A211C !important;
    margin: 0 !important;
    font-weight: 400 !important;
    letter-spacing: -.005em !important;
}
.cb-xmas-card-desc {
    font-family: 'Rubrik', sans-serif !important;
    font-size: 13.5px !important;
    color: #4A3F38 !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

/* CTA button — appears at bottom of card */
.cb-xmas-card-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    background: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
    color: #ffffff !important;
    font-family: 'Rubrik', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 10px 24px -10px rgba(168, 29, 34, .55);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-radius .35s cubic-bezier(.2, .8, .2, 1);
    line-height: 1;
}
.cb-xmas-card-cta > span {
    font-size: 18px;
    line-height: 1;
    margin-top: -1px;
    transition: transform .25s;
}
.cb-xmas-card-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 30px -12px rgba(168, 29, 34, .65);
    border-radius: 6px;
}
.cb-xmas-card-cta:hover > span {
    transform: translateX(4px);
}

/* -------- Quote wizard "From Christmas Collection" pill -------- */
.cb-xmas-context-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #FBF6EF 0%, #FCE9DF 100%);
    border: 1px solid #FAD9C9;
    border-radius: 999px;
    font-family: 'Rubrik', sans-serif;
    font-size: 11.5px;
    color: #A01D22;
    font-weight: 500;
    letter-spacing: .02em;
    margin-bottom: 12px;
    max-width: 100%;
    word-break: break-word;
}
.cb-xmas-context-pill strong {
    color: #2A211C;
    font-weight: 700;
    font-family: Consolas, Menlo, monospace;
    font-size: 11px;
}

/* -------- Hero (shortcode-owned) -------- */
.cb-xmas-hero {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 44px;
    padding: 40px 20px 8px;
}
.cb-xmas-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Rubrik', sans-serif !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #A01D22 !important;
    margin-bottom: 20px;
}
.cb-xmas-hero-eyebrow::before,
.cb-xmas-hero-eyebrow::after {
    content: "";
    width: 32px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
}
.cb-xmas-hero-title {
    font-family: 'Glitten', Georgia, serif !important;
    font-size: clamp(30px, 4vw, 46px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.022em !important;
    color: #2A211C !important;
    margin: 0 0 16px !important;
    font-weight: 400 !important;
    text-wrap: balance;
}
.cb-xmas-hero-sub {
    font-family: 'Rubrik', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: #4A3F38 !important;
    max-width: 56ch;
    margin: 0 auto !important;
}
@media (max-width: 640px) {
    .cb-xmas-hero { padding: 20px 16px 4px; margin-bottom: 30px; }
    .cb-xmas-hero-sub { font-size: 15px !important; }
}

/* -------- 5-column grid support -------- */
.cb-xmas-grid[data-columns="5"] { grid-template-columns: repeat(5, 1fr); gap: 20px; }
@media (max-width: 1280px) {
    .cb-xmas-grid[data-columns="5"] { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1080px) {
    .cb-xmas-grid[data-columns="5"] { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 780px) {
    .cb-xmas-grid[data-columns="5"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .cb-xmas-grid[data-columns="5"] { grid-template-columns: 1fr; }
}
/* 4-column baseline (default now) */
.cb-xmas-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1080px) { .cb-xmas-grid[data-columns="4"] { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .cb-xmas-grid[data-columns="4"] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .cb-xmas-grid[data-columns="4"] { grid-template-columns: 1fr; } }

/* -------- Card media as button (was div) — reset UA button styles -------- */
button.cb-xmas-card-media {
    all: unset;
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #FBF6EF;
    cursor: zoom-in;
    font: inherit;
}
button.cb-xmas-card-media:focus-visible {
    outline: 3px solid #C8252B;
    outline-offset: -3px;
}

/* Zoom icon that appears on hover over the image */
.cb-xmas-card-zoom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.85);
    z-index: 3;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .96);
    color: #A01D22;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity .28s, transform .28s cubic-bezier(.2, .8, .2, 1);
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .35);
    pointer-events: none;
}
.cb-xmas-card-zoom svg { width: 22px; height: 22px; }
.cb-xmas-card:hover .cb-xmas-card-zoom {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* -------- Card CTA button — kill inherited theme padding/border and
   FORCE the pill radius across every state so the hover doesn't
   morph into a different shape or lose its rounded corners. -------- */
html body .cb-xmas-card .cb-xmas-card-cta,
html body .cb-xmas-card button.cb-xmas-card-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 13px 20px !important;
    background: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%) !important;
    background-color: #C8252B !important;
    color: #FFFFFF !important;
    font-family: 'Rubrik', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    border: 0 !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    line-height: 1 !important;
    box-shadow: 0 10px 24px -10px rgba(168, 29, 34, .55) !important;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1),
                box-shadow .25s,
                background .25s !important;
    margin-top: auto;
    width: auto !important;
    max-width: 100% !important;
    text-decoration: none !important;
    text-align: center !important;
    white-space: nowrap;
}
html body .cb-xmas-card .cb-xmas-card-cta > span {
    font-size: 16px !important;
    line-height: 1 !important;
    margin-top: -1px !important;
    transition: transform .25s !important;
}
html body .cb-xmas-card .cb-xmas-card-cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 18px 32px -12px rgba(168, 29, 34, .70) !important;
    background: linear-gradient(125deg, #C8252B 0%, #A01D22 52%, #821519 100%) !important;
    background-color: #A01D22 !important;
    border-radius: 999px !important;
    color: #FFFFFF !important;
}
html body .cb-xmas-card .cb-xmas-card-cta:hover > span {
    transform: translateX(4px) !important;
}
html body .cb-xmas-card .cb-xmas-card-cta:focus-visible {
    outline: 3px solid #FAD9C9 !important;
    outline-offset: 2px !important;
}

/* -------- Lightbox -------- */
.cb-xmas-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(20, 12, 8, .88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .28s ease;
}
.cb-xmas-lightbox.is-open {
    display: flex;
    opacity: 1;
    animation: cbXmasFade .28s ease both;
}
@keyframes cbXmasFade { from { opacity: 0; } to { opacity: 1; } }

.cb-xmas-lightbox-close {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    border: 1.5px solid rgba(255, 255, 255, .35);
    color: #FFFFFF;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .2s, transform .25s, border-color .2s;
    z-index: 2;
}
.cb-xmas-lightbox-close:hover {
    background: #A01D22;
    border-color: transparent;
    transform: rotate(90deg);
}
.cb-xmas-lightbox-close svg { width: 22px; height: 22px; }

.cb-xmas-lightbox-figure {
    margin: 0;
    max-width: min(1100px, 92vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.cb-xmas-lightbox-img {
    max-width: 100%;
    max-height: 78vh;
    border-radius: 14px;
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .60);
    animation: cbXmasZoom .35s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes cbXmasZoom {
    from { transform: scale(.95); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.cb-xmas-lightbox-caption {
    color: #FBF6EF;
    font-family: 'Glitten', Georgia, serif;
    font-size: 17px;
    letter-spacing: .01em;
    text-align: center;
    max-width: 40ch;
}

/* -------- Direct-Quote Modal -------- */
.cb-xmas-req-modal {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(20, 12, 8, .60);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .3s ease;
}
.cb-xmas-req-modal.is-open {
    display: flex;
    opacity: 1;
    animation: cbXmasFade .3s ease both;
}
.cb-xmas-req-card {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: #FFFDFA;
    border-radius: 22px;
    padding: 30px 30px 30px;
    box-shadow: 0 60px 110px -40px rgba(20, 12, 8, .65),
                0 30px 60px -28px rgba(20, 12, 8, .45);
    border: 1px solid rgba(235, 224, 213, .6);
    animation: cbXmasSlideUp .38s cubic-bezier(.2, .8, .2, 1) .05s both;
}
@keyframes cbXmasSlideUp {
    from { transform: translateY(20px) scale(.98); opacity: 0; }
    to   { transform: translateY(0) scale(1);      opacity: 1; }
}
.cb-xmas-req-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(125deg, #E0473C, #C8252B, #A01D22);
    border-radius: 22px 22px 0 0;
}
.cb-xmas-req-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid #EBE0D5;
    background: #FFFDFA;
    color: #2A211C;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .2s, color .2s, transform .28s, border-color .2s;
    z-index: 2;
}
.cb-xmas-req-close:hover {
    background: #A01D22;
    color: #FFFFFF;
    border-color: transparent;
    transform: rotate(90deg);
}
.cb-xmas-req-close svg { width: 16px; height: 16px; }

/* Context strip — image + ref label */
.cb-xmas-req-context {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: linear-gradient(135deg, #FBF6EF, #FCE9DF);
    border: 1px solid #FAD9C9;
    border-radius: 14px;
    margin: 10px 0 22px;
}
.cb-xmas-req-thumb {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
    flex: none;
    box-shadow: 0 6px 14px -6px rgba(120, 60, 38, .35);
}
.cb-xmas-req-ctx-label {
    font-family: 'Rubrik', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #A01D22;
    margin-bottom: 3px;
}
.cb-xmas-req-ctx-ref {
    font-family: 'Glitten', Georgia, serif;
    font-size: 15px;
    color: #2A211C;
    line-height: 1.15;
}
.cb-xmas-req-ctx-ref .cb-xmas-req-ref {
    font-family: Consolas, Menlo, monospace;
    font-size: 12.5px;
    color: #A01D22;
    padding: 1px 6px;
    background: rgba(200, 37, 43, .08);
    border-radius: 4px;
    margin-right: 4px;
}

.cb-xmas-req-heading {
    font-family: 'Glitten', Georgia, serif !important;
    font-weight: 400 !important;
    font-size: clamp(24px, 3vw, 30px) !important;
    color: #2A211C !important;
    margin: 0 0 6px !important;
    letter-spacing: -.018em !important;
    line-height: 1.1 !important;
}
.cb-xmas-req-heading em {
    font-style: italic;
    background: linear-gradient(125deg, #E0473C, #A01D22);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.cb-xmas-req-tagline {
    font-family: 'Rubrik', sans-serif !important;
    font-size: 13.5px !important;
    color: #4A3F38 !important;
    line-height: 1.5 !important;
    margin: 0 0 22px !important;
}

/* Form fields */
.cb-xmas-req-form { display: flex; flex-direction: column; gap: 14px; }
.cb-xmas-req-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 520px) {
    .cb-xmas-req-row { grid-template-columns: 1fr; }
}
.cb-xmas-req-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cb-xmas-req-form label > span {
    font-family: 'Rubrik', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: #2A211C;
    letter-spacing: .02em;
}
.cb-xmas-req-form label > span em {
    color: #C8252B;
    font-style: normal;
    margin-left: 2px;
}
.cb-xmas-req-form input,
.cb-xmas-req-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #EBE0D5;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14.5px;
    color: #2A211C;
    background: #FFFFFF;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
}
.cb-xmas-req-form input:hover,
.cb-xmas-req-form textarea:hover { border-color: #FAD9C9; }
.cb-xmas-req-form input:focus,
.cb-xmas-req-form textarea:focus {
    outline: none;
    border-color: #C8252B;
    box-shadow: 0 0 0 4px rgba(200, 37, 43, .10);
}
.cb-xmas-req-form textarea {
    resize: vertical;
    min-height: 90px;
    line-height: 1.55;
}

.cb-xmas-req-status {
    font-size: 13px;
    color: #4A3F38;
    min-height: 18px;
    margin: 2px 0 -4px;
}
.cb-xmas-req-status.is-error {
    color: #A01D22;
    font-weight: 500;
}

/* Submit button */
html body .cb-xmas-req-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 14px 26px !important;
    margin-top: 6px !important;
    background: linear-gradient(125deg, #E0473C, #C8252B, #A01D22) !important;
    color: #FFFFFF !important;
    font-family: 'Rubrik', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    border: 0 !important;
    border-radius: 999px !important;
    cursor: pointer;
    box-shadow: 0 12px 26px -10px rgba(168, 29, 34, .55) !important;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s !important;
    align-self: flex-end;
}
html body .cb-xmas-req-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 18px 34px -12px rgba(168, 29, 34, .70) !important;
}
html body .cb-xmas-req-submit.is-loading { pointer-events: none; opacity: .8; }
html body .cb-xmas-req-submit.is-loading .cb-xmas-req-submit-text { opacity: .6; }
html body .cb-xmas-req-submit.is-loading .cb-xmas-req-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #FFFFFF;
    animation: cbXmasSpin .7s linear infinite;
}
.cb-xmas-req-spinner { display: none; }
@keyframes cbXmasSpin { to { transform: rotate(360deg); } }

/* Success screen */
.cb-xmas-req-success {
    text-align: center;
    padding: 20px 0 8px;
    animation: cbXmasSlideUp .4s cubic-bezier(.2, .8, .2, 1) both;
}
.cb-xmas-req-success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(125deg, #E0473C, #C8252B, #A01D22);
    color: #FFFFFF;
    display: grid;
    place-items: center;
    box-shadow: 0 18px 36px -12px rgba(168, 29, 34, .55);
    animation: cbXmasPop .5s cubic-bezier(.2, .8, .2, 1) .05s both;
}
@keyframes cbXmasPop {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.cb-xmas-req-success-icon svg { width: 30px; height: 30px; }
.cb-xmas-req-success h3 {
    font-family: 'Glitten', Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    color: #2A211C !important;
    margin: 0 0 10px !important;
}
.cb-xmas-req-success p {
    font-family: 'Rubrik', sans-serif !important;
    font-size: 14px !important;
    color: #4A3F38 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}
.cb-xmas-req-success strong {
    font-family: Consolas, Menlo, monospace;
    color: #A01D22;
    padding: 1px 6px;
    background: rgba(200, 37, 43, .08);
    border-radius: 4px;
}

/* =========================================================
   CHRISTMAS COLLECTION — PARENT-THEME CASCADE RESET
   The Printing parent theme styles <article> elements (blog posts,
   portfolio items) with a red gradient background + hover effects
   that leak into our card grid because we also use <article>. And
   it applies border-radius: 50% to <img> on hover, turning our
   product images into ovals.
   Force-reset everything at html body specificity so no parent rule
   can leak through, regardless of load order.
   ========================================================= */

/* Hard-reset the article-card background — no red gradient, no
   pseudo-element rings, no hover glow inherited from blog styling. */
html body .cb-xmas-grid article.cb-xmas-card,
html body article.cb-xmas-card {
    background: #ffffff !important;
    background-image: none !important;
    background-color: #ffffff !important;
    border: 1px solid #EBE0D5 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 20px -8px rgba(82, 48, 32, .18) !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #2A211C !important;
    text-align: left !important;
    /* Kill any parent-theme transitions that would override ours */
    transition: transform .35s cubic-bezier(.2, .7, .2, 1),
                box-shadow .35s,
                border-color .35s !important;
}
html body .cb-xmas-grid article.cb-xmas-card::before,
html body .cb-xmas-grid article.cb-xmas-card::after,
html body article.cb-xmas-card::before,
html body article.cb-xmas-card::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}
html body article.cb-xmas-card:hover {
    background: #ffffff !important;
    background-image: none !important;
    background-color: #ffffff !important;
    transform: translateY(-6px) !important;
    box-shadow: 0 28px 60px -22px rgba(120, 60, 38, .40) !important;
    border-color: transparent !important;
}

/* Force-reset the image inside the card — stay rectangular with
   overflow-clip on the container, never inherit border-radius from
   the parent theme's img[hover] rules. */
html body .cb-xmas-card .cb-xmas-card-media img,
html body article.cb-xmas-card button.cb-xmas-card-media img,
html body article.cb-xmas-card img {
    border-radius: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1) !important;
}
html body article.cb-xmas-card:hover img,
html body article.cb-xmas-card:hover .cb-xmas-card-media img {
    border-radius: 0 !important;   /* NEVER go circular */
    transform: scale(1.06) !important;
}

/* Force-reset the media button so parent-theme <button> rules can't
   inject a background/border/padding of their own.
   NOTE: DO NOT use `all: unset` here — it knocks `pointer-events`
   back to `auto` inherit and some parent themes set the container
   to `pointer-events: none`, killing our click handler. Instead
   explicitly reset each property we care about. */
html body article.cb-xmas-card button.cb-xmas-card-media,
html body .cb-xmas-card button.cb-xmas-card-media {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background: #FBF6EF !important;
    background-image: none !important;
    background-color: #FBF6EF !important;
    cursor: zoom-in !important;
    font: inherit !important;
    color: inherit !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    text-shadow: none !important;
    pointer-events: auto !important;   /* MUST stay clickable */
    -webkit-appearance: none !important;
    appearance: none !important;
    /* Prevent parent theme's aggressive `button:hover` transforms from
       eating the click on hover-then-click sequences. */
    transform: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
}
/* Ensure the image inside the button is NOT capturing pointer events —
   we want clicks to bubble up to the button. */
html body article.cb-xmas-card button.cb-xmas-card-media img,
html body .cb-xmas-card button.cb-xmas-card-media img {
    pointer-events: none !important;
}
/* The ref/category pills sit on top of the button but shouldn't
   swallow clicks either. */
html body article.cb-xmas-card .cb-xmas-card-ref,
html body article.cb-xmas-card .cb-xmas-card-cat,
html body article.cb-xmas-card .cb-xmas-card-zoom {
    pointer-events: none !important;
}
html body article.cb-xmas-card button.cb-xmas-card-media::before,
html body article.cb-xmas-card button.cb-xmas-card-media::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Force-reset the card BODY so its background stays white and the
   Glitten heading + Rubrik text keep their intended colors regardless
   of whatever wrapping section (Elementor Text Editor, etc.) applies. */
html body article.cb-xmas-card .cb-xmas-card-body {
    background: #ffffff !important;
    background-image: none !important;
    padding: 22px 22px 24px !important;
    margin: 0 !important;
    border: 0 !important;
    color: #2A211C !important;
}
html body article.cb-xmas-card .cb-xmas-card-title,
html body article.cb-xmas-card .cb-xmas-card-title * {
    color: #2A211C !important;
    -webkit-text-fill-color: #2A211C !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
}
html body article.cb-xmas-card .cb-xmas-card-desc {
    color: #4A3F38 !important;
    -webkit-text-fill-color: #4A3F38 !important;
}

/* -------- Load More button -------- */
.cb-xmas-loadmore-wrap {
    text-align: center;
    margin: 48px 0 8px;
    display: flex;
    justify-content: center;
}
html body .cb-xmas-loadmore-wrap[hidden] { display: none !important; }

html body .cb-xmas-loadmore {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 16px 34px !important;
    background: #FFFFFF !important;
    background-image: none !important;
    color: #2A211C !important;
    font-family: 'Rubrik', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    border: 1.5px solid #EBE0D5 !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    box-shadow: 0 8px 22px -10px rgba(82, 48, 32, .25) !important;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1),
                box-shadow .25s,
                border-color .25s,
                background .25s,
                color .25s !important;
    line-height: 1 !important;
    text-decoration: none !important;
}
html body .cb-xmas-loadmore-remaining {
    color: #8A7B70 !important;
    font-weight: 500 !important;
    font-family: Consolas, Menlo, monospace !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
html body .cb-xmas-loadmore svg {
    width: 16px !important;
    height: 16px !important;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1) !important;
}
html body .cb-xmas-loadmore:hover {
    background: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%) !important;
    background-color: #C8252B !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 18px 34px -12px rgba(168, 29, 34, .55) !important;
}
html body .cb-xmas-loadmore:hover .cb-xmas-loadmore-remaining {
    color: rgba(255, 255, 255, .82) !important;
}
html body .cb-xmas-loadmore:hover svg {
    transform: translateY(3px) !important;
}
html body .cb-xmas-loadmore:focus-visible {
    outline: 3px solid #FAD9C9 !important;
    outline-offset: 3px !important;
}
@media (max-width: 640px) {
    .cb-xmas-loadmore-wrap { margin: 34px 0 4px; }
    html body .cb-xmas-loadmore { padding: 14px 26px !important; font-size: 13px !important; }
}

/* -------- /christmas-collection/ — collapse parent-theme top padding
   The parent theme reserves a large empty band above `.entry-content`
   on default Page templates for a page-title / breadcrumb area. When
   that area is hidden (Elementor page settings), the reserved padding
   remains — leaving a big empty gap between the site header and the
   shortcode's hero. `:has()` lets us apply the reset ONLY on pages
   that actually render the collection shortcode.
   -------- */
html body:has(.cb-xmas-wrap) .site-content,
html body:has(.cb-xmas-wrap) #content,
html body:has(.cb-xmas-wrap) .site-main,
html body:has(.cb-xmas-wrap) main,
html body:has(.cb-xmas-wrap) .entry-content,
html body:has(.cb-xmas-wrap) article.page,
html body:has(.cb-xmas-wrap) .page-content-wrap,
html body:has(.cb-xmas-wrap) .page-wrap {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
html body:has(.cb-xmas-wrap) .page-title-area,
html body:has(.cb-xmas-wrap) .breadcrumb-area,
html body:has(.cb-xmas-wrap) .th-breadcumb-wrapper,
html body:has(.cb-xmas-wrap) .page-heading,
html body:has(.cb-xmas-wrap) .th-page-title,
html body:has(.cb-xmas-wrap) .inner-page-title {
    display: none !important;
}
/* Also tighten the shortcode's own top padding — the hero eyebrow can
   sit closer to the site header without losing rhythm. */
html body .cb-xmas-wrap { padding-top: 8px !important; }
html body .cb-xmas-hero { padding-top: 16px !important; }
@media (max-width: 768px) {
    html body .cb-xmas-wrap { padding-top: 4px !important; }
    html body .cb-xmas-hero { padding-top: 8px !important; }
}

/* =========================================================
 * CHRISTMAS COLLECTION — MULTI-SELECT DRAWER + CONTACT MODAL
 * Editorial "selection" flow (not a cart).
 * ========================================================= */

/* Body lock while drawer or contact modal is open */
body.cb-xmas-drawer-locked { overflow: hidden !important; }

/* ---- Card CTA — Add / In-selection toggle ---- */
html body .cb-xmas-card .cb-xmas-add {
    /* Match the existing .cb-xmas-card-cta base — brand red pill */
    padding: 12px 20px !important;
    gap: 8px !important;
}
html body .cb-xmas-card .cb-xmas-add .cb-xmas-add-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    transition: opacity .2s;
}
html body .cb-xmas-card .cb-xmas-add .cb-xmas-add-label[data-when="added"] { display: none; }
html body .cb-xmas-card .cb-xmas-add.is-added .cb-xmas-add-label[data-when="idle"]  { display: none; }
html body .cb-xmas-card .cb-xmas-add.is-added .cb-xmas-add-label[data-when="added"] { display: inline-flex; }

/* "In selection" state — cream chip, brand-red text (calm confirmation) */
html body .cb-xmas-card .cb-xmas-add.is-added {
    background: #FCE9DF !important;
    background-image: none !important;
    background-color: #FCE9DF !important;
    color: #A01D22 !important;
    box-shadow: none !important;
    border: 1.5px solid #FAD9C9 !important;
}
html body .cb-xmas-card .cb-xmas-add.is-added:hover {
    background: #FBF6EF !important;
    background-color: #FBF6EF !important;
    background-image: none !important;
    color: #A01D22 !important;
    border-color: #C8252B !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px -8px rgba(120,60,38,.20) !important;
}
/* Card itself gets a subtle border when selected */
html body article.cb-xmas-card:has(.cb-xmas-add.is-added) {
    border-color: #FAD9C9 !important;
    box-shadow: 0 10px 30px -12px rgba(200, 37, 43, .18) !important;
}

/* ---- Drawer shell ---- */
.cb-xmas-drawer {
    position: fixed;
    inset: 0;
    z-index: 100002;
    display: none;
    background: rgba(20, 12, 8, .38);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .28s ease;
}
.cb-xmas-drawer.is-open {
    display: block;
    opacity: 1;
}

/* The panel itself — slides in from the right */
.cb-xmas-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 440px;
    max-width: 92vw;
    background: #FFFDFA;
    border-left: 1px solid #EBE0D5;
    box-shadow: -30px 0 80px -30px rgba(20, 12, 8, .40);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .42s cubic-bezier(.2, .8, .2, 1);
    font-family: 'Rubrik', system-ui, -apple-system, sans-serif;
    color: #2A211C;
}
.cb-xmas-drawer.is-open .cb-xmas-drawer-panel {
    transform: translateX(0);
}

/* Top brand bar */
.cb-xmas-drawer-panel::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
    z-index: 2;
}

/* Close button */
html body .cb-xmas-drawer .cb-xmas-drawer-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 5 !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #FFFDFA !important;
    background-image: none !important;
    border: 1.5px solid #EBE0D5 !important;
    color: #2A211C !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .2s, color .2s, transform .28s, border-color .2s !important;
    box-shadow: 0 4px 12px -4px rgba(82, 48, 32, .25) !important;
}
html body .cb-xmas-drawer .cb-xmas-drawer-close:hover {
    background: #A01D22 !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    transform: rotate(90deg) !important;
}
html body .cb-xmas-drawer .cb-xmas-drawer-close svg { width: 16px; height: 16px; display: block; }

/* Header */
.cb-xmas-drawer-head {
    padding: 32px 32px 18px 32px;
    border-bottom: 1px solid #F6EEE4;
    flex: none;
}
.cb-xmas-drawer-head h2 {
    font-family: 'Glitten', Georgia, serif !important;
    font-size: 26px !important;
    line-height: 1.1 !important;
    color: #2A211C !important;
    margin: 0 0 6px !important;
    font-weight: 400 !important;
    letter-spacing: -.018em !important;
}
.cb-xmas-drawer-sub {
    font-family: 'Rubrik', sans-serif !important;
    font-size: 12.5px !important;
    color: #8A7B70 !important;
    letter-spacing: .04em;
    margin: 0 !important;
}

/* Body — scrollable */
.cb-xmas-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 32px 20px 32px;
    -webkit-overflow-scrolling: touch;
}
.cb-xmas-drawer-body::-webkit-scrollbar { width: 8px; }
.cb-xmas-drawer-body::-webkit-scrollbar-thumb { background: #EBE0D5; border-radius: 999px; }

/* Empty state */
.cb-xmas-drawer-empty {
    text-align: center;
    padding: 44px 8px 30px;
    color: #8A7B70;
}
.cb-xmas-drawer-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 16px;
    background: #FCE9DF;
    color: #C8252B;
    display: grid;
    place-items: center;
}
.cb-xmas-drawer-empty p {
    font-size: 14px;
    line-height: 1.55;
    color: #4A3F38;
    margin: 0;
}
.cb-xmas-drawer-empty strong {
    color: #2A211C;
    font-weight: 600;
}

/* Item list */
.cb-xmas-drawer-items {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.cb-xmas-drawer-item {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid #F6EEE4;
    align-items: flex-start;
}
.cb-xmas-drawer-item:last-child { border-bottom: 0; }

.cb-xmas-drawer-item-thumb {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    overflow: hidden;
    background: #FCE9DF;
    box-shadow: 0 4px 12px -6px rgba(82, 48, 32, .30);
}
.cb-xmas-drawer-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cb-xmas-drawer-item-meta { min-width: 0; }
.cb-xmas-drawer-item-ref {
    display: inline-block;
    font-family: Consolas, Menlo, monospace;
    font-size: 11px;
    font-weight: 700;
    color: #A01D22;
    background: rgba(200, 37, 43, .08);
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: .04em;
}
.cb-xmas-drawer-item-title {
    font-family: 'Glitten', Georgia, serif;
    font-size: 15.5px;
    color: #2A211C;
    line-height: 1.2;
    margin: 6px 0 10px 0;
    letter-spacing: -.008em;
}
.cb-xmas-drawer-item-qty {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cb-xmas-drawer-item-qty label {
    font-family: 'Rubrik', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #8A7B70;
}
html body .cb-xmas-qty-stepper {
    display: inline-flex !important;
    align-items: stretch !important;
    border: 1.5px solid #EBE0D5 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    transition: border-color .2s, box-shadow .2s !important;
    padding: 0 !important;
}
html body .cb-xmas-qty-stepper:focus-within {
    border-color: #C8252B !important;
    box-shadow: 0 0 0 3px rgba(200, 37, 43, .10) !important;
}

/* Stepper buttons — flat rectangular, brand-red on hover, NEVER circular.
   Parent theme paints all <button> red + circular; the html body + !important
   stack overrides that at every state. */
html body .cb-xmas-qty-stepper button,
html body .cb-xmas-qty-stepper .cb-xmas-qty-minus,
html body .cb-xmas-qty-stepper .cb-xmas-qty-plus {
    all: unset;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: auto !important;
    min-height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #FBF6EF !important;
    background-image: none !important;
    background-color: #FBF6EF !important;
    color: #2A211C !important;
    cursor: pointer !important;
    font-family: 'Rubrik', sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    border: 0 !important;
    border-radius: 0 !important;   /* NEVER round */
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    transform: none !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    transition: background .2s, color .2s !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    flex: none !important;
}
html body .cb-xmas-qty-stepper button:hover,
html body .cb-xmas-qty-stepper .cb-xmas-qty-minus:hover,
html body .cb-xmas-qty-stepper .cb-xmas-qty-plus:hover {
    background: #C8252B !important;
    background-color: #C8252B !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border-radius: 0 !important;   /* Stay rectangular on hover */
    transform: none !important;
    box-shadow: none !important;
}
html body .cb-xmas-qty-stepper button:active {
    background: #A01D22 !important;
    background-color: #A01D22 !important;
    border-radius: 0 !important;
}
html body .cb-xmas-qty-stepper button::before,
html body .cb-xmas-qty-stepper button::after {
    content: none !important;
    display: none !important;
}

/* Input — wider so 3-digit qty like 100 or 250 fits without clipping */
html body .cb-xmas-qty-stepper input {
    width: 74px !important;
    min-width: 74px !important;
    padding: 8px 6px !important;
    border: 0 !important;
    border-left: 1px solid #EBE0D5 !important;
    border-right: 1px solid #EBE0D5 !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: center !important;
    font-family: 'Rubrik', sans-serif !important;
    font-size: 14px !important;
    color: #2A211C !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
    appearance: textfield;
}
html body .cb-xmas-qty-stepper input:focus { outline: none !important; box-shadow: none !important; }
html body .cb-xmas-qty-stepper input::-webkit-outer-spin-button,
html body .cb-xmas-qty-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

html body .cb-xmas-drawer .cb-xmas-drawer-item-remove {
    all: unset;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8A7B70;
    cursor: pointer;
    transition: background .2s, color .2s, transform .25s;
}
html body .cb-xmas-drawer .cb-xmas-drawer-item-remove:hover {
    background: rgba(200, 37, 43, .10);
    color: #A01D22;
    transform: scale(1.08);
}

/* Notes block */
.cb-xmas-drawer-notes-block { margin-top: 22px; }
.cb-xmas-drawer-notes-block label {
    display: block;
    font-family: 'Rubrik', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    color: #2A211C;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.cb-xmas-drawer-notes-block label small {
    font-weight: 400;
    color: #8A7B70;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11.5px;
    margin-left: 4px;
}
#cb-xmas-drawer-notes {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #EBE0D5;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    color: #2A211C;
    background: #FFFFFF;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
    resize: vertical;
    min-height: 90px;
    line-height: 1.55;
}
#cb-xmas-drawer-notes:hover { border-color: #FAD9C9; }
#cb-xmas-drawer-notes:focus {
    outline: none;
    border-color: #C8252B;
    box-shadow: 0 0 0 4px rgba(200, 37, 43, .10);
}

/* Footer */
.cb-xmas-drawer-foot {
    padding: 18px 32px 24px 32px;
    border-top: 1px solid #F6EEE4;
    background: #FBF6EF;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cb-xmas-drawer-summary {
    font-family: 'Rubrik', sans-serif;
    font-size: 12.5px;
    color: #8A7B70;
    letter-spacing: .04em;
    text-align: center;
}
.cb-xmas-drawer-total {
    font-family: 'Glitten', Georgia, serif;
    font-size: 15px;
    color: #2A211C;
    letter-spacing: -.005em;
}
html body .cb-xmas-drawer .cb-xmas-drawer-submit {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 26px;
    background: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
    color: #FFFFFF;
    font-family: 'Rubrik', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 999px;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 12px 26px -10px rgba(168, 29, 34, .55);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1),
                box-shadow .25s,
                border-radius .35s cubic-bezier(.2, .8, .2, 1),
                background .25s;
}
html body .cb-xmas-drawer .cb-xmas-drawer-submit:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -12px rgba(168, 29, 34, .70);
    border-radius: 6px;
}
html body .cb-xmas-drawer .cb-xmas-drawer-submit:disabled {
    background: #EBE0D5;
    color: #8A7B70;
    cursor: not-allowed;
    box-shadow: none;
    opacity: .8;
}

/* ---- Floating recall pill ---- */
html body .cb-xmas-drawer-recall {
    all: unset;
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99000;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    background: #FFFDFA;
    color: #2A211C;
    border: 1.5px solid #FAD9C9;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 20px 50px -18px rgba(120, 60, 38, .40),
                0 4px 12px -4px rgba(82, 48, 32, .20);
    font-family: 'Glitten', Georgia, serif;
    font-size: 15px;
    letter-spacing: -.005em;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1),
                box-shadow .25s,
                background .25s,
                color .25s,
                border-color .25s;
    animation: cbXmasRecallPop .45s cubic-bezier(.2, .8, .2, 1) both;
}
html body .cb-xmas-drawer-recall:hover {
    background: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
    color: #FFFFFF;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 26px 60px -20px rgba(168, 29, 34, .55);
}
.cb-xmas-drawer-recall-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
    color: #FFFFFF;
    font-family: 'Rubrik', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    transition: background .25s, color .25s;
}
html body .cb-xmas-drawer-recall:hover .cb-xmas-drawer-recall-count {
    background: rgba(255,255,255,.22);
    color: #FFFFFF;
}
@keyframes cbXmasRecallPop {
    0%   { opacity: 0; transform: translateY(20px) scale(.9); }
    100% { opacity: 1; transform: translateY(0)   scale(1);  }
}

/* ---- Toast ---- */
.cb-xmas-toast {
    position: fixed;
    left: 50%;
    bottom: 90px;
    transform: translateX(-50%) translateY(20px);
    z-index: 99500;
    background: #2A211C;
    color: #FBF6EF;
    padding: 12px 20px;
    border-radius: 999px;
    font-family: 'Rubrik', sans-serif;
    font-size: 13px;
    letter-spacing: .02em;
    box-shadow: 0 18px 40px -14px rgba(20, 12, 8, .55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.cb-xmas-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---- Contact modal — recap chip + back button ---- */
.cb-xmas-req-recap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #FBF6EF 0%, #FCE9DF 100%);
    border: 1px solid #FAD9C9;
    border-radius: 999px;
    font-family: 'Rubrik', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: #A01D22;
    letter-spacing: .02em;
    margin: 0 0 22px;
}
.cb-xmas-req-recap-dot { color: #8A7B70; opacity: .6; }
.cb-xmas-req-recap-total { color: #2A211C; }

.cb-xmas-req-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    flex-wrap: wrap;
}
html body .cb-xmas-req-back {
    all: unset;
    cursor: pointer;
    font-family: 'Rubrik', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #4A3F38;
    padding: 10px 4px;
    transition: color .25s;
}
html body .cb-xmas-req-back:hover { color: #A01D22; }

/* Submit stays right-aligned in the nav row on desktop */
html body .cb-xmas-req-modal .cb-xmas-req-submit { align-self: auto; margin-top: 0 !important; }

/* ---- MOBILE — drawer becomes bottom sheet ---- */
@media (max-width: 640px) {
    .cb-xmas-drawer-panel {
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        max-height: 88vh;
        border-left: 0;
        border-top: 1px solid #EBE0D5;
        border-radius: 22px 22px 0 0;
        transform: translateY(100%);
        box-shadow: 0 -30px 80px -30px rgba(20, 12, 8, .40);
    }
    .cb-xmas-drawer.is-open .cb-xmas-drawer-panel { transform: translateY(0); }
    .cb-xmas-drawer-panel::before { border-radius: 22px 22px 0 0; }

    /* Drag handle cue at top edge */
    .cb-xmas-drawer-panel::after {
        content: "";
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 44px;
        height: 4px;
        border-radius: 999px;
        background: rgba(42, 33, 28, .18);
        z-index: 3;
    }

    .cb-xmas-drawer-head    { padding: 26px 22px 14px 22px; }
    .cb-xmas-drawer-body    { padding: 10px 22px 16px 22px; }
    .cb-xmas-drawer-foot    { padding: 14px 22px 22px 22px; }
    .cb-xmas-drawer-head h2 { font-size: 22px !important; }

    .cb-xmas-drawer-item { grid-template-columns: 60px 1fr auto; gap: 12px; }
    .cb-xmas-drawer-item-thumb { width: 60px; height: 60px; }

    html body .cb-xmas-drawer-recall {
        bottom: 16px;
        right: 16px;
        padding: 12px 18px;
        font-size: 14px;
    }
}
@media (max-width: 420px) {
    .cb-xmas-drawer-panel { max-height: 92vh; }
}

@media (prefers-reduced-motion: reduce) {
    .cb-xmas-drawer,
    .cb-xmas-drawer-panel,
    html body .cb-xmas-drawer-recall,
    .cb-xmas-toast {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
 * CHRISTMAS COLLECTION — ADD-TO-SELECTION MODAL (dims + qty capture)
 * Opens the moment a customer clicks Add on a card. Captures
 * mandatory Width × Length × Height + Quantity before the item
 * lands in the drawer.
 * ========================================================= */

.cb-xmas-add-modal {
    position: fixed;
    inset: 0;
    z-index: 100003;  /* above drawer (100002), below contact modal (100001)? Actually needs to be above drawer */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(20, 12, 8, .60);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .28s ease;
}
.cb-xmas-add-modal.is-open {
    display: flex;
    opacity: 1;
    animation: cbXmasFade .28s ease both;
}

.cb-xmas-add-card {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: #FFFDFA;
    border-radius: 22px;
    padding: 28px 30px 26px;
    box-shadow: 0 60px 110px -40px rgba(20, 12, 8, .65),
                0 30px 60px -28px rgba(20, 12, 8, .45);
    border: 1px solid rgba(235, 224, 213, .6);
    font-family: 'Rubrik', system-ui, -apple-system, sans-serif;
    color: #2A211C;
    animation: cbXmasSlideUp .38s cubic-bezier(.2, .8, .2, 1) .05s both;
}
.cb-xmas-add-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(125deg, #E0473C, #C8252B, #A01D22);
    border-radius: 22px 22px 0 0;
}

html body .cb-xmas-add-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1.5px solid #EBE0D5 !important;
    background: #FFFDFA !important;
    color: #2A211C !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .2s, color .2s, transform .28s, border-color .2s !important;
    z-index: 2 !important;
}
html body .cb-xmas-add-close:hover {
    background: #A01D22 !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    transform: rotate(90deg) !important;
}
html body .cb-xmas-add-close svg { width: 15px; height: 15px; }

/* Design preview at top of modal */
.cb-xmas-add-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: linear-gradient(135deg, #FBF6EF, #FCE9DF);
    border: 1px solid #FAD9C9;
    border-radius: 14px;
    margin: 10px 0 20px;
}
.cb-xmas-add-thumb-wrap {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    flex: none;
    background: #FCE9DF;
    box-shadow: 0 6px 14px -6px rgba(120, 60, 38, .35);
}
.cb-xmas-add-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cb-xmas-add-preview-meta { flex: 1; min-width: 0; }
.cb-xmas-add-ref {
    display: inline-block;
    font-family: Consolas, Menlo, monospace;
    font-size: 11px;
    font-weight: 700;
    color: #A01D22;
    background: rgba(200, 37, 43, .10);
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: .04em;
    margin-bottom: 6px;
}
.cb-xmas-add-title-txt {
    font-family: 'Glitten', Georgia, serif;
    font-size: 15px;
    color: #2A211C;
    line-height: 1.2;
    letter-spacing: -.005em;
}

.cb-xmas-add-heading {
    font-family: 'Glitten', Georgia, serif !important;
    font-weight: 400 !important;
    font-size: 24px !important;
    color: #2A211C !important;
    margin: 0 0 6px !important;
    letter-spacing: -.018em !important;
    line-height: 1.1 !important;
}
.cb-xmas-add-heading em {
    font-style: italic;
    background: linear-gradient(125deg, #E0473C, #A01D22);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.cb-xmas-add-tagline {
    font-family: 'Rubrik', sans-serif !important;
    font-size: 13px !important;
    color: #4A3F38 !important;
    line-height: 1.5 !important;
    margin: 0 0 18px !important;
}

/* Field blocks in the Add modal */
.cb-xmas-add-field { margin-bottom: 16px; }
.cb-xmas-add-label {
    display: block;
    font-family: 'Rubrik', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    color: #2A211C;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.cb-xmas-add-label small {
    font-weight: 400;
    color: #8A7B70;
    text-transform: lowercase;
    letter-spacing: .02em;
    font-size: 11px;
    margin: 0 4px;
}
.cb-xmas-add-label em {
    color: #C8252B;
    font-style: normal;
    margin-left: 3px;
}

/* Dimensions grid — three equal input columns (W L H) */
.cb-xmas-dims-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
.cb-xmas-dim {
    position: relative;
    display: flex;
    align-items: stretch;
    background: #FFFFFF;
    border: 1.5px solid #EBE0D5;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.cb-xmas-dim:focus-within {
    border-color: #C8252B;
    box-shadow: 0 0 0 3px rgba(200, 37, 43, .10);
}
.cb-xmas-dim > label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    background: #FBF6EF;
    color: #8A7B70;
    font-family: 'Rubrik', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    border-right: 1px solid #EBE0D5;
    flex: none;
}
html body .cb-xmas-dim input {
    all: unset;
    width: 100%;
    padding: 10px 10px;
    font-family: 'Rubrik', sans-serif;
    font-size: 14px;
    color: #2A211C;
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
    -moz-appearance: textfield;
    appearance: textfield;
}
html body .cb-xmas-dim input::-webkit-outer-spin-button,
html body .cb-xmas-dim input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Invalid state — red border + soft red fill */
html body .cb-xmas-dim input.is-invalid,
html body .cb-xmas-add-modal input.is-invalid {
    background: rgba(200, 37, 43, .05) !important;
}
html body .cb-xmas-dim:has(input.is-invalid) {
    border-color: #C8252B;
    box-shadow: 0 0 0 3px rgba(200, 37, 43, .12);
    animation: cbXmasShakeField .3s ease both;
}
html body .cb-xmas-qty-stepper:has(input.is-invalid) {
    border-color: #C8252B !important;
    box-shadow: 0 0 0 3px rgba(200, 37, 43, .12) !important;
    animation: cbXmasShakeField .3s ease both;
}
@keyframes cbXmasShakeField {
    25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    75% { transform: translateX(-2px); }
}

/* Add-modal status line */
.cb-xmas-add-status {
    font-family: 'Rubrik', sans-serif;
    font-size: 12.5px;
    color: #4A3F38;
    min-height: 18px;
    margin: 2px 0 6px;
}
.cb-xmas-add-status.is-error {
    color: #A01D22;
    font-weight: 600;
}

/* Actions row (Cancel / Add to Selection) */
.cb-xmas-add-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
}
html body .cb-xmas-add-cancel {
    all: unset;
    cursor: pointer;
    font-family: 'Rubrik', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #4A3F38;
    padding: 10px 4px;
    transition: color .25s;
}
html body .cb-xmas-add-cancel:hover { color: #A01D22; }

html body .cb-xmas-add-confirm {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    background: linear-gradient(125deg, #E0473C, #C8252B, #A01D22);
    color: #FFFFFF;
    font-family: 'Rubrik', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 999px;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 12px 26px -10px rgba(168, 29, 34, .55);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1),
                box-shadow .25s,
                border-radius .35s cubic-bezier(.2, .8, .2, 1);
}
html body .cb-xmas-add-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -12px rgba(168, 29, 34, .70);
    border-radius: 6px;
}
html body .cb-xmas-add-confirm svg { flex: none; }

/* Mobile — bottom-sheet feel */
@media (max-width: 520px) {
    .cb-xmas-add-modal { padding: 12px; align-items: flex-end; }
    .cb-xmas-add-card {
        max-height: calc(100vh - 24px);
        border-radius: 22px 22px 0 0;
        padding: 22px 22px 20px;
    }
    .cb-xmas-add-card::before { border-radius: 22px 22px 0 0; }
    .cb-xmas-add-heading { font-size: 20px !important; }
    .cb-xmas-add-actions { flex-direction: column-reverse; gap: 8px; }
    html body .cb-xmas-add-cancel { align-self: center; }
    html body .cb-xmas-add-confirm { width: 100%; }
}

/* ---- Drawer item: dims block + incomplete marker ---- */
.cb-xmas-drawer-item-dims {
    margin: 4px 0 10px;
}
.cb-xmas-drawer-item-dims > label {
    display: block;
    font-family: 'Rubrik', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #8A7B70;
    margin-bottom: 6px;
}
.cb-xmas-drawer-item-dims > label small {
    font-weight: 400;
    color: #B3A89E;
    text-transform: lowercase;
    letter-spacing: .02em;
    margin-left: 4px;
}

/* Compact dims grid variant used inside drawer item rows */
.cb-xmas-dims-grid-sm {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
}
html body .cb-xmas-dims-grid-sm input {
    width: 100%;
    padding: 7px 6px;
    border: 1.5px solid #EBE0D5;
    border-radius: 8px;
    background: #FFFFFF;
    font-family: 'Rubrik', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    color: #2A211C;
    box-sizing: border-box;
    -moz-appearance: textfield;
    appearance: textfield;
    transition: border-color .2s, box-shadow .2s;
}
html body .cb-xmas-dims-grid-sm input:focus {
    outline: none;
    border-color: #C8252B;
    box-shadow: 0 0 0 3px rgba(200, 37, 43, .10);
}
html body .cb-xmas-dims-grid-sm input::-webkit-outer-spin-button,
html body .cb-xmas-dims-grid-sm input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
html body .cb-xmas-dims-grid-sm input::placeholder {
    color: #B3A89E;
    font-weight: 500;
    letter-spacing: .04em;
}

/* Incomplete row cue — soft peach border + small warning label */
.cb-xmas-drawer-item-incomplete {
    background: rgba(250, 217, 201, .18);
    border-radius: 12px;
    padding: 12px 10px !important;
    margin-left: -10px;
    margin-right: -10px;
}
.cb-xmas-drawer-item-incomplete .cb-xmas-drawer-item-dims > label::after {
    content: " · required";
    color: #C8252B;
    font-weight: 600;
    text-transform: none;
    letter-spacing: .02em;
    font-size: 10.5px;
}

/* =========================================================
 * MOBILE — CHRISTMAS COLLECTION FIXES
 * User-reported bugs on mobile:
 *  1. Mobile menu drawer renders white-on-red instead of dark-on-white
 *  2. Burger toggler vanishes on white header bg (same-color problem)
 *  3. Christmas grid should show 2 cards per row on mobile (not 1)
 *  4. Christmas banner too small / unengaging on mobile
 *  5. Add-modal / lightbox / drawer needed to render above parent-theme
 *     mobile menu layers which live at max z-index
 * ========================================================= */

/* ---- 1) MOBILE MENU DRAWER: force readable white panel + dark text.
   Parent theme paints the drawer red by default; we already open it
   with position:fixed + max z-index earlier, but its BG kept coming
   through red because parent CSS `background-image` was winning. */
@media (max-width: 1080px) {
    html body.th-menu-opened .th-menu-inner,
    html body.th-menu-opened .th-side-menu,
    html body.th-menu-opened .th-menu-wrap,
    html body.th-menu-opened [class*="th-menu"]:not(.th-menu-toggler):not(.th-menu-icon-wrap),
    html body.th-menu-opened [class*="th-side"],
    html body.menu-open  .th-menu-inner,
    html body.menu-open  [class*="th-menu"]:not(.th-menu-toggler):not(.th-menu-icon-wrap),
    html body.menu-open  [class*="mobile-menu"]:not(.mobile-menu-toggle),
    html body.menu-open  [class*="mobile-nav"] {
        background: #FFFDFA !important;
        background-color: #FFFDFA !important;
        background-image: none !important;
        color: #2A211C !important;
    }
    /* Menu items ink */
    html body.th-menu-opened .th-menu-inner *,
    html body.th-menu-opened .th-side-menu *,
    html body.th-menu-opened [class*="th-menu"]:not(.th-menu-toggler) *,
    html body.menu-open      .th-menu-inner *,
    html body.menu-open      [class*="mobile-menu"] *,
    html body.menu-open      [class*="mobile-nav"] * {
        color: #2A211C !important;
        -webkit-text-fill-color: #2A211C !important;
    }
    /* Menu-item text — Glitten so it feels editorial like the rest */
    html body.th-menu-opened .th-menu-inner a,
    html body.th-menu-opened .th-side-menu a,
    html body.menu-open      .th-menu-inner a,
    html body.menu-open      [class*="mobile-menu"] a {
        font-family: 'Glitten', Georgia, serif !important;
        font-size: 22px !important;
        letter-spacing: -.005em !important;
        padding: 14px 24px !important;
        display: block !important;
        border-bottom: 1px solid #F6EEE4 !important;
        transition: color .2s, background .2s !important;
    }
    html body.th-menu-opened .th-menu-inner a:hover,
    html body.th-menu-opened .th-menu-inner a:active,
    html body.menu-open      .th-menu-inner a:hover,
    html body.menu-open      .th-menu-inner a:active {
        color: #A01D22 !important;
        background: #FBF6EF !important;
    }
    /* Sub-menu items smaller + peach bg */
    html body.th-menu-opened .th-menu-inner ul ul a,
    html body.menu-open      .th-menu-inner ul ul a {
        font-family: 'Rubrik', sans-serif !important;
        font-size: 14.5px !important;
        padding-left: 40px !important;
        background: #FCE9DF !important;
        color: #4A3F38 !important;
    }
    /* Close (X) button inside the drawer — brand red pill so it stands out */
    html body.th-menu-opened .th-menu-inner .close-menu,
    html body.menu-open      .th-menu-inner .close-menu {
        background: transparent !important;
        text-align: right;
        padding: 14px 20px !important;
    }
    html body.th-menu-opened .th-menu-inner .close-menu .th-menu-toggler::before,
    html body.th-menu-opened .th-menu-inner .close-menu .th-menu-toggler::after,
    html body.menu-open      .th-menu-inner .close-menu .th-menu-toggler::before,
    html body.menu-open      .th-menu-inner .close-menu .th-menu-toggler::after {
        background: #C8252B !important;
    }
}

/* ---- 2) BURGER TOGGLER: guarantee visibility against ANY header bg.
   The 3 lines were the SAME red as the header on white so they blended
   in and looked "gone". Wrap the toggler in a subtle peach tile so
   it always pops. */
@media (max-width: 1080px) {
    html body .th-menu-toggler,
    html body .th-nav-identity-panel.toggler-icon .th-menu-toggler {
        background: #FCE9DF !important;
        border: 1px solid #FAD9C9 !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 6px -2px rgba(82, 48, 32, .18) !important;
        width: 40px !important;
        height: 40px !important;
    }
    html body .th-menu-toggler:hover,
    html body .th-menu-toggler:active {
        background: #C8252B !important;
        border-color: transparent !important;
    }
    html body .th-menu-toggler:hover > span,
    html body .th-menu-toggler:hover::before,
    html body .th-menu-toggler:hover::after,
    html body .th-menu-toggler:active > span,
    html body .th-menu-toggler:active::before,
    html body .th-menu-toggler:active::after {
        background: #FFFFFF !important;
    }
    /* Never let the toggler disappear during the fade-to-menu transition */
    html body .th-menu-toggler {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* ---- 3) CHRISTMAS COLLECTION GRID: two cards per row on mobile
   (was one). Single column only at very-narrow < 380px. */
@media (max-width: 640px) {
    html body .cb-xmas-grid,
    html body .cb-xmas-grid[data-columns="2"],
    html body .cb-xmas-grid[data-columns="3"],
    html body .cb-xmas-grid[data-columns="4"],
    html body .cb-xmas-grid[data-columns="5"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    /* Card body padding tighter so 2-up fits comfortably */
    html body article.cb-xmas-card .cb-xmas-card-body {
        padding: 14px 12px 16px !important;
        gap: 8px !important;
    }
    /* Title — Glitten reads better with tighter tracking + a hair more line-height
       than the desktop rule. Cap width so #NN sits on its own line consistently. */
    html body .cb-xmas-card-title {
        font-size: 15.5px !important;
        line-height: 1.2 !important;
        letter-spacing: -0.01em !important;
        font-weight: 400 !important;
    }
    html body .cb-xmas-card-desc { display: none !important; }  /* hide desc — save vertical space */
    /* Ref pill smaller so it doesn't dominate small thumbnails */
    html body .cb-xmas-card-ref { font-size: 9.5px !important; padding: 3px 7px !important; top: 8px !important; left: 8px !important; }
    html body .cb-xmas-card-cat { font-size: 9.5px !important; padding: 3px 8px !important; top: 8px !important; right: 8px !important; }
    /* CTA button — narrower pill, tighter tracking, WRAP allowed so full label
       shows across 2 lines instead of getting sliced off by the card's overflow.
       Also uses Rubrik semibold + normal-case for a cleaner mobile read than the
       desktop uppercase treatment. */
    html body .cb-xmas-card .cb-xmas-add {
        padding: 9px 10px !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        letter-spacing: 0.02em !important;
        text-transform: none !important;
        gap: 5px !important;
        white-space: normal !important;
        word-break: keep-all !important;
        line-height: 1.2 !important;
        min-height: 40px !important;
        border-radius: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    html body .cb-xmas-card .cb-xmas-add .cb-xmas-add-label {
        line-height: 1.2 !important;
        white-space: normal !important;
        text-align: center !important;
    }
    html body .cb-xmas-card .cb-xmas-add svg { width: 12px !important; height: 12px !important; }
    /* Filter chips wrap tighter */
    html body .cb-xmas-filters { gap: 6px !important; margin-bottom: 20px !important; }
    html body .cb-xmas-filter { padding: 8px 14px !important; font-size: 12px !important; }
}
@media (max-width: 380px) {
    html body .cb-xmas-grid,
    html body .cb-xmas-grid[data-columns="2"],
    html body .cb-xmas-grid[data-columns="3"],
    html body .cb-xmas-grid[data-columns="4"],
    html body .cb-xmas-grid[data-columns="5"] {
        grid-template-columns: 1fr !important;
    }
    /* Bring desc back on 1-col layout */
    html body .cb-xmas-card-desc { display: block !important; font-size: 13px !important; }
    html body .cb-xmas-card-title { font-size: 17px !important; }
}

/* ---- 4) CHRISTMAS BANNER: make it feel premium + tappable on mobile.
   Use object-fit: cover with a taller portrait crop, larger CTA pill. */
@media (max-width: 768px) {
    html body .cb-xmas-banner {
        margin: 14px 12px !important;   /* small side inset so it doesn't kiss the viewport edge */
        border-radius: 18px !important;
        min-height: 260px !important;
        display: flex !important;
        align-items: stretch !important;
    }
    html body .cb-xmas-banner img {
        width: 100% !important;
        height: 100% !important;
        min-height: 260px !important;
        object-fit: cover !important;
        object-position: center !important;
    }
    html body .cb-xmas-banner-cta {
        bottom: 16px !important;
        padding: 14px 26px !important;
        font-size: 13.5px !important;
        letter-spacing: .06em !important;
        border-radius: 999px !important;
        box-shadow: 0 18px 40px -12px rgba(168, 29, 34, .60) !important;
    }
    html body .cb-xmas-banner-cta > span { font-size: 18px !important; }
}
@media (max-width: 480px) {
    html body .cb-xmas-banner { min-height: 300px !important; }
    html body .cb-xmas-banner img { min-height: 300px !important; }
    html body .cb-xmas-banner-cta {
        bottom: 20px !important;
        padding: 13px 22px !important;
        font-size: 12.5px !important;
    }
}

/* ---- 5) Z-INDEX HARDENING for lightbox + add-modal + drawer on mobile.
   Parent theme's mobile menu sets z-index 2147483647 (max int) on
   `body.th-menu-opened` scoped rules. When our modals open ALONE (menu
   closed) they're fine, but on some pages the parent theme leaves
   invisible drawer nodes in the DOM that intercept clicks. Bump our
   layers above any parent theme drawer regardless of state. */
html body .cb-xmas-lightbox        { z-index: 2147483640 !important; }
html body .cb-xmas-req-modal       { z-index: 2147483641 !important; }
html body .cb-xmas-drawer          { z-index: 2147483642 !important; }
html body .cb-xmas-add-modal       { z-index: 2147483644 !important; }
html body .cb-xmas-drawer-recall   { z-index: 2147483639 !important; }
html body .cb-xmas-toast           { z-index: 2147483645 !important; }

/* Make sure Add-modal actually renders on mobile — earlier max-width
   was 460px which is fine, but touch scroll needs momentum + safe
   inset padding so the card isn't hidden under mobile browser chrome. */
@media (max-width: 640px) {
    html body .cb-xmas-add-modal {
        padding: 0 !important;   /* full-height bottom-sheet feel */
        align-items: flex-end !important;
    }
    html body .cb-xmas-add-card {
        max-width: 100% !important;
        max-height: 92vh !important;
        border-radius: 22px 22px 0 0 !important;
        padding: 24px 20px 22px !important;
        padding-bottom: max(22px, env(safe-area-inset-bottom)) !important;
        -webkit-overflow-scrolling: touch !important;
    }
    html body .cb-xmas-add-card::before { border-radius: 22px 22px 0 0 !important; }
    /* Drag-handle cue for consistency with the drawer */
    html body .cb-xmas-add-card::after {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: rgba(42, 33, 28, .18);
        z-index: 3;
    }
    /* Confirm button full width, softer */
    html body .cb-xmas-add-actions {
        flex-direction: column-reverse !important;
        gap: 8px !important;
        margin-top: 8px !important;
    }
    html body .cb-xmas-add-confirm {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    html body .cb-xmas-add-cancel { align-self: center !important; padding: 12px !important; }
}

/* Make sure card zoom (lightbox open) works on touch — parent theme
   sometimes disables :hover pseudos on touch which hid the SVG icon,
   masking the tap target. Force pointer-events on and give the button
   a subtle touch highlight. */
@media (hover: none), (max-width: 768px) {
    html body article.cb-xmas-card button.cb-xmas-card-media {
        pointer-events: auto !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(200, 37, 43, .18) !important;
    }
    /* Show the zoom icon by default on touch so users know the image is tappable */
    html body article.cb-xmas-card .cb-xmas-card-zoom {
        opacity: .8 !important;
        transform: translate(-50%, -50%) scale(.9) !important;
        width: 36px !important;
        height: 36px !important;
    }
    html body article.cb-xmas-card .cb-xmas-card-zoom svg { width: 16px !important; height: 16px !important; }
}

/* =========================================================
 * CHRISTMAS BANNER — MOBILE TEXT OVERLAY
 * The desktop PNG has logo + "Christmas Season Alert" + subtitle
 * baked in. The mobile PNG is text-free (product still-life only)
 * so we render the same message as an HTML overlay on top of it —
 * kept crisp, editable, and always legible at small sizes.
 * The overlay is hidden on desktop so it never conflicts with the
 * baked composition.
 * ========================================================= */
html body .cb-xmas-banner .cb-xmas-banner-overlay {
    display: none;
}

@media (max-width: 768px) {
    html body .cb-xmas-banner .cb-xmas-banner-overlay {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        text-align: center;
        position: absolute;
        top: 22px;
        left: 22px;
        right: 22px;
        z-index: 3;
        padding: 0 8px;
        pointer-events: none;
        line-height: 1;
    }

    /* Logo row: script wordmark + circular CB monogram */
    html body .cb-xmas-banner .cb-xmas-banner-logo {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 14px;
    }
    html body .cb-xmas-banner .cb-xmas-banner-wordmark {
        font-family: 'Monotype Corsiva', 'Glitten', Georgia, serif;
        font-size: 24px;
        line-height: 0.95;
        color: #2A211C;
        letter-spacing: -0.01em;
        text-align: right;
        font-weight: 400;
    }
    html body .cb-xmas-banner .cb-xmas-banner-monogram {
        display: inline-grid;
        place-items: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: linear-gradient(135deg, #C8252B 0%, #A01D22 100%);
        color: #FFFFFF;
        font-family: 'Glitten', Georgia, serif;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1;
        box-shadow: 0 3px 8px -2px rgba(168, 29, 34, 0.45);
    }

    /* Headline stack: "Christmas" red, "Season Alert" dark ink */
    html body .cb-xmas-banner .cb-xmas-banner-heading {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin: 0 0 10px;
        font-family: 'Glitten', Georgia, serif;
        font-weight: 400;
        line-height: 1.02;
        letter-spacing: -0.02em;
    }
    html body .cb-xmas-banner .cb-xmas-banner-heading-red {
        color: #A01D22;
        font-size: 32px;
    }
    html body .cb-xmas-banner .cb-xmas-banner-heading-ink {
        color: #2A211C;
        font-size: 26px;
    }

    /* Thin gold divider with a small star at its center */
    html body .cb-xmas-banner .cb-xmas-banner-divider {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin: 6px 0 10px;
        width: 130px;
    }
    html body .cb-xmas-banner .cb-xmas-banner-divider::before,
    html body .cb-xmas-banner .cb-xmas-banner-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: linear-gradient(to right, transparent 0%, #C9A464 50%, transparent 100%);
    }
    html body .cb-xmas-banner .cb-xmas-banner-divider span {
        display: inline-block;
        width: 6px;
        height: 6px;
        transform: rotate(45deg);
        background: #C9A464;
        border-radius: 1px;
    }

    /* Subtitle */
    html body .cb-xmas-banner .cb-xmas-banner-sub {
        font-family: 'Rubrik', sans-serif;
        font-size: 11.5px;
        color: #4A3F38;
        line-height: 1.4;
        margin: 0;
        letter-spacing: 0.01em;
        max-width: 240px;
    }
}

/* Very narrow phones — scale everything down slightly so nothing wraps */
@media (max-width: 380px) {
    html body .cb-xmas-banner .cb-xmas-banner-overlay {
        top: 18px;
        left: 18px;
        right: 18px;
    }
    html body .cb-xmas-banner .cb-xmas-banner-wordmark { font-size: 21px; }
    html body .cb-xmas-banner .cb-xmas-banner-monogram { width: 23px; height: 23px; font-size: 10px; }
    html body .cb-xmas-banner .cb-xmas-banner-heading-red { font-size: 28px; }
    html body .cb-xmas-banner .cb-xmas-banner-heading-ink { font-size: 22px; }
    html body .cb-xmas-banner .cb-xmas-banner-sub { font-size: 11px; }
}

/* =========================================================
 * CHRISTMAS COLLECTION — mobile card WIDTH maximization.
 * Previously the grid sat inside ~40px of stacked horizontal
 * padding (wrap 20px + section chrome), leaving cards tiny.
 * Trim wrap padding to 10px, tighten gap, so each card gets
 * the maximum usable width on the phone viewport.
 * ========================================================= */
@media (max-width: 640px) {
    html body .cb-xmas-wrap {
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 100% !important;
    }
    html body .cb-xmas-grid,
    html body .cb-xmas-grid[data-columns="2"],
    html body .cb-xmas-grid[data-columns="3"],
    html body .cb-xmas-grid[data-columns="4"],
    html body .cb-xmas-grid[data-columns="5"] {
        gap: 10px !important;
    }
    /* Filter chip row + hero also share the wrap padding — no need to
       re-widen since the whole wrap is now edge-to-edge with 10px. */
    html body .cb-xmas-hero { padding-left: 10px !important; padding-right: 10px !important; }
}

/* =========================================================
 * CHRISTMAS COLLECTION — LIGHTBOX viewport pinning.
 * On mobile the lightbox was rendering with content BELOW the
 * fold, forcing users to scroll to see the image. Root causes:
 *  - Body scroll wasn't locked while the lightbox was open, so
 *    the fixed-positioned modal appeared at scroll-Y 0 which is
 *    off-screen if the user had scrolled the page.
 *  - `100vh` on iOS Safari includes the address bar → the modal's
 *    computed height was taller than the visible viewport, pushing
 *    center-aligned content below the fold.
 * Fix: force pinning with dvh, guarantee viewport-sized container,
 * and lock body scroll via CSS `:has()` for as long as the modal
 * carries `.is-open`.
 * ========================================================= */
html body .cb-xmas-lightbox {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;             /* dynamic viewport — iOS-safe */
    overflow: hidden !important;
    align-items: center !important;
    justify-content: center !important;
}
html body .cb-xmas-lightbox.is-open {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* Constrain figure/image within dvh so nothing overflows on mobile */
html body .cb-xmas-lightbox .cb-xmas-lightbox-figure {
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    box-sizing: border-box !important;
}
html body .cb-xmas-lightbox .cb-xmas-lightbox-img {
    max-width: 92vw !important;
    max-height: 78dvh !important;          /* dynamic viewport — iOS-safe */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}
/* CSS-only body scroll lock while the lightbox carries .is-open —
   removes the "scroll to find the modal" problem without needing JS. */
html:has(.cb-xmas-lightbox.is-open) body {
    overflow: hidden !important;
    /* On iOS, position: fixed is more reliable at preventing background
       scroll — but breaks stored scroll position. overflow: hidden alone
       covers 95% of cases; JS would be needed for the 5% edge. */
    touch-action: none !important;
}
@media (max-width: 640px) {
    html body .cb-xmas-lightbox .cb-xmas-lightbox-img {
        max-height: 72dvh !important;
        border-radius: 10px !important;
    }
    html body .cb-xmas-lightbox .cb-xmas-lightbox-close {
        top: 12px !important;
        right: 12px !important;
        width: 40px !important;
        height: 40px !important;
    }
}


/* =========================================================
 * CHRISTMAS COLLECTION — TRANSFORMED-ANCESTOR RESCUE
 * When the recall/cart drawer or lightbox opens, `position: fixed`
 * was being trapped inside an Elementor container that has an
 * implicit transform (animation, will-change, or contain). Result:
 * the modal renders at the bottom of the page or overflows the
 * viewport instead of anchoring to the visible screen.
 * Fix: strip transform / filter / contain / will-change from every
 * plausible ancestor chain while a modal carries `.is-open`, and
 * lock body scroll so the fixed layer truly attaches to the viewport.
 * Uses CSS `:has()` — iOS 16.4+, Android Chrome 105+, all modern desktop.
 * ========================================================= */
html:has(.cb-xmas-drawer.is-open) .elementor,
html:has(.cb-xmas-drawer.is-open) .elementor-page,
html:has(.cb-xmas-drawer.is-open) .elementor-section,
html:has(.cb-xmas-drawer.is-open) .elementor-container,
html:has(.cb-xmas-drawer.is-open) .elementor-row,
html:has(.cb-xmas-drawer.is-open) .elementor-column,
html:has(.cb-xmas-drawer.is-open) .elementor-element,
html:has(.cb-xmas-drawer.is-open) .elementor-widget,
html:has(.cb-xmas-drawer.is-open) .elementor-widget-container,
html:has(.cb-xmas-drawer.is-open) main,
html:has(.cb-xmas-drawer.is-open) article,
html:has(.cb-xmas-drawer.is-open) .site-content,
html:has(.cb-xmas-drawer.is-open) .site-main,
html:has(.cb-xmas-drawer.is-open) .entry-content,
html:has(.cb-xmas-drawer.is-open) .page,
html:has(.cb-xmas-drawer.is-open) .cb-xmas-wrap,
html:has(.cb-xmas-lightbox.is-open) .elementor,
html:has(.cb-xmas-lightbox.is-open) .elementor-page,
html:has(.cb-xmas-lightbox.is-open) .elementor-section,
html:has(.cb-xmas-lightbox.is-open) .elementor-container,
html:has(.cb-xmas-lightbox.is-open) .elementor-row,
html:has(.cb-xmas-lightbox.is-open) .elementor-column,
html:has(.cb-xmas-lightbox.is-open) .elementor-element,
html:has(.cb-xmas-lightbox.is-open) .elementor-widget,
html:has(.cb-xmas-lightbox.is-open) .elementor-widget-container,
html:has(.cb-xmas-lightbox.is-open) main,
html:has(.cb-xmas-lightbox.is-open) article,
html:has(.cb-xmas-lightbox.is-open) .site-content,
html:has(.cb-xmas-lightbox.is-open) .entry-content,
html:has(.cb-xmas-lightbox.is-open) .cb-xmas-wrap,
html:has(.cb-xmas-add-modal.is-open) .elementor,
html:has(.cb-xmas-add-modal.is-open) .elementor-page,
html:has(.cb-xmas-add-modal.is-open) .elementor-section,
html:has(.cb-xmas-add-modal.is-open) .elementor-container,
html:has(.cb-xmas-add-modal.is-open) .elementor-widget,
html:has(.cb-xmas-add-modal.is-open) .elementor-widget-container,
html:has(.cb-xmas-add-modal.is-open) main,
html:has(.cb-xmas-add-modal.is-open) article,
html:has(.cb-xmas-add-modal.is-open) .cb-xmas-wrap {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
    isolation: auto !important;
    will-change: auto !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Lock body scroll for every open modal so nothing scrolls behind. */
html:has(.cb-xmas-drawer.is-open) body,
html:has(.cb-xmas-add-modal.is-open) body {
    overflow: hidden !important;
    touch-action: none !important;
}

/* =========================================================
 * LIGHTBOX IMAGE — force viewport constraint at max specificity.
 * The lightbox image was overflowing 150%+ of viewport on mobile
 * because of inherited img rules. Anchor max-width to viewport
 * regardless of the container's computed width.
 * Also tightens outer lightbox padding on mobile so the figure
 * container itself doesn't push the image past the right edge.
 * ========================================================= */
html body .cb-xmas-lightbox,
html body .cb-xmas-lightbox * {
    box-sizing: border-box !important;
}
/* Kill outer padding on mobile so the image gets the full viewport */
@media (max-width: 768px) {
    html body .cb-xmas-lightbox {
        padding: 8px !important;
    }
}
html body .cb-xmas-lightbox .cb-xmas-lightbox-figure {
    width: 100% !important;
    max-width: min(1100px, 100vw) !important;
    max-height: 92dvh !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 auto !important;
}
html body .cb-xmas-lightbox .cb-xmas-lightbox-img,
html body figure.cb-xmas-lightbox-figure > img,
html body .cb-xmas-lightbox img.cb-xmas-lightbox-img,
html body .cb-xmas-lightbox picture img {
    /* calc(100vw - 32px) accounts for the outer 8px padding on both
       sides plus a safety margin so nothing ever clips on the right. */
    max-width: calc(100vw - 32px) !important;
    max-height: 78dvh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    /* Hard cap in case a parent-theme rule forces `width: 100%` on
       imgs at natural pixel size. */
    min-width: 0 !important;
}
@media (max-width: 640px) {
    html body .cb-xmas-lightbox .cb-xmas-lightbox-img,
    html body figure.cb-xmas-lightbox-figure > img,
    html body .cb-xmas-lightbox img.cb-xmas-lightbox-img,
    html body .cb-xmas-lightbox picture img {
        max-width: calc(100vw - 24px) !important;
        max-height: 74dvh !important;
    }
}

/* =========================================================
 * CHRISTMAS COLLECTION — MAXIMIZE CARD WIDTH ON MOBILE.
 * The card was sitting inside stacked padding: Elementor container
 * (16px) + wrap (10px) + grid gap (10px) + card body (12px).
 * On a 375px phone that's ~60px lost horizontally. Kill the
 * elementor-container padding ONLY on pages that render the
 * shortcode, tighten wrap to 6px, and tighten card body to 10px.
 * Result: each card gets ~15-20px more usable width.
 * ========================================================= */
@media (max-width: 640px) {
    html body:has(.cb-xmas-wrap) .elementor-section .elementor-container,
    html body:has(.cb-xmas-wrap) .elementor-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    html body .cb-xmas-wrap {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    html body .cb-xmas-grid,
    html body .cb-xmas-grid[data-columns="2"],
    html body .cb-xmas-grid[data-columns="3"],
    html body .cb-xmas-grid[data-columns="4"],
    html body .cb-xmas-grid[data-columns="5"] {
        gap: 8px !important;
    }
    /* Card body padding tighter */
    html body article.cb-xmas-card .cb-xmas-card-body {
        padding: 12px 10px 14px !important;
        gap: 6px !important;
    }
    /* Title — smaller so it stays on 1-2 lines even at narrow widths */
    html body .cb-xmas-card-title {
        font-size: 14px !important;
        line-height: 1.2 !important;
        letter-spacing: -0.005em !important;
        font-weight: 400 !important;
    }
    /* Card CTA — tighter still to preserve card width */
    html body .cb-xmas-card .cb-xmas-add {
        padding: 7px 6px !important;
        font-size: 9.5px !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em !important;
        min-height: 34px !important;
        gap: 3px !important;
    }
    html body .cb-xmas-card .cb-xmas-add .cb-xmas-add-label {
        font-size: 9.5px !important;
        line-height: 1.15 !important;
    }
    html body .cb-xmas-card .cb-xmas-add svg {
        width: 10px !important;
        height: 10px !important;
    }
    /* Filter chips + hero share the wrap padding — inherit the 6px */
    html body .cb-xmas-hero {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

/* Even tighter on very-narrow phones */
@media (max-width: 380px) {
    html body .cb-xmas-wrap {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    html body .cb-xmas-grid { gap: 6px !important; }
    html body .cb-xmas-card-title { font-size: 13.5px !important; }
}

/* =========================================================
 * CHRISTMAS COLLECTION — KILL PARENT-THEME GAP + FESTIVE RIBBON
 *
 * 1) Parent theme wraps every Page in:
 *      #main-content > .container > .row > .content-wrap
 *        > article > .entry-content > .title-page > h1
 *        > .detail-content-wrap > .elementor
 *    Even when Elementor's page-title is disabled, that .title-page
 *    div (with the H1 "Christmas Collection") + heavy top padding on
 *    .container/.row/.entry-content leaves ~180px of dead vertical
 *    space between the header and our shortcode's hero on both mobile
 *    and desktop.
 *
 * 2) On desktop that empty band feels lifeless — replace it with a
 *    festive Christmas ribbon strip (holly + star pattern, "Season's
 *    Greetings" wordmark) that sits between the header and the hero.
 *    Purely decorative; hidden on mobile since the wrap is already
 *    tight there.
 *
 * All rules :has()-scoped to pages that actually render .cb-xmas-wrap
 * so the changes never leak to other Pages.
 * ========================================================= */

/* Zero every parent-theme wrapper's top padding on collection pages */
html body:has(.cb-xmas-wrap) #main-content,
html body:has(.cb-xmas-wrap) .main-page-default,
html body:has(.cb-xmas-wrap) .main-page-default > .container,
html body:has(.cb-xmas-wrap) .main-page-default > .container > .row,
html body:has(.cb-xmas-wrap) .content-wrap,
html body:has(.cb-xmas-wrap) article.page,
html body:has(.cb-xmas-wrap) article.page > .entry-content,
html body:has(.cb-xmas-wrap) .detail-content-wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Hide the parent theme's "Christmas Collection" H1 block — our shortcode
   renders its own editorial hero right below with better typography. */
html body:has(.cb-xmas-wrap) .title-page,
html body:has(.cb-xmas-wrap) h1.titlelv1.entry-title,
html body:has(.cb-xmas-wrap) .entry-title {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
}

/* =========================================================
 * FESTIVE RIBBON STRIP (desktop only)
 * A wide horizontal band between the header and the hero.
 * Deep red gradient with:
 *   - Repeating gold snowflake/star pattern via SVG data URI
 *   - Two decorative gold serrations top + bottom (ribbon edge feel)
 *   - Center: "Season's Greetings" in Monotype Corsiva script + a
 *     small "CHRISTMAS 2026" eyebrow underneath
 *   - Subtle 8s shimmer sweep to make it feel alive
 * ========================================================= */

@media (min-width: 769px) {
    html body .cb-xmas-wrap {
        position: relative !important;
        padding-top: 0 !important;
    }

    /* The ribbon itself — sits above the hero, full-bleed edge-to-edge */
    html body .cb-xmas-wrap::before {
        content: "" !important;
        display: block !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: 96px !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        margin-top: 0 !important;
        margin-bottom: 32px !important;
        background:
            /* Shimmer sweep — moves left to right on animation */
            linear-gradient(100deg,
                transparent 0%,
                transparent 38%,
                rgba(255, 244, 214, .22) 50%,
                transparent 62%,
                transparent 100%) 0 0 / 200% 100% no-repeat,
            /* Snowflake / holly-berry pattern via SVG data URI */
            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><g fill='none' stroke='%23E8C46C' stroke-width='1.4' stroke-linecap='round' opacity='0.72'><path d='M20 12 L20 30 M12 21 L28 21 M14 15 L26 27 M14 27 L26 15'/><path d='M76 66 L76 84 M68 75 L84 75 M70 69 L82 81 M70 81 L82 69'/></g><g fill='%23E8C46C' opacity='0.55'><circle cx='60' cy='22' r='2.6'/><circle cx='66' cy='27' r='2.2'/><circle cx='62' cy='30' r='2.4'/><circle cx='32' cy='70' r='2.6'/><circle cx='38' cy='75' r='2.2'/><circle cx='34' cy='78' r='2.4'/></g></svg>") repeat 0 0,
            /* Deep brand-red base gradient */
            linear-gradient(180deg, #A01D22 0%, #8A181D 50%, #6E1216 100%) !important;
        background-size: 200% 100%, 96px 96px, 100% 100% !important;
        border-top: 1px solid rgba(232, 196, 108, .35) !important;
        border-bottom: 1px solid rgba(232, 196, 108, .35) !important;
        box-shadow:
            inset 0 12px 24px -12px rgba(0, 0, 0, .35),
            inset 0 -12px 24px -12px rgba(0, 0, 0, .35),
            0 6px 18px -8px rgba(120, 20, 24, .35) !important;
        position: relative !important;
        animation: cbXmasRibbonShimmer 9s ease-in-out infinite !important;
    }

    /* Overlay: gold scalloped edges + centered wordmark, absolute-positioned */
    html body .cb-xmas-wrap {
        counter-reset: cb-xmas-ribbon;
    }
    html body .cb-xmas-wrap::after {
        content: "Season\2019s Greetings  ·  Christmas 2026" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 96px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-family: 'Monotype Corsiva', 'Glitten', Georgia, serif !important;
        font-size: 30px !important;
        color: #FFF4D6 !important;
        letter-spacing: 0.02em !important;
        text-shadow:
            0 2px 6px rgba(120, 20, 24, .55),
            0 0 22px rgba(232, 196, 108, .35) !important;
        pointer-events: none !important;
        z-index: 2 !important;
        line-height: 1 !important;
        padding: 0 24px !important;
    }

    /* Wider desktop tweak — bigger script wordmark */
    @media (min-width: 1200px) {
        html body .cb-xmas-wrap::before {
            min-height: 110px !important;
            margin-bottom: 40px !important;
        }
        html body .cb-xmas-wrap::after {
            height: 110px !important;
            font-size: 34px !important;
        }
    }
}

@keyframes cbXmasRibbonShimmer {
    0%, 100% { background-position: 0% 0, 0 0, 0 0; }
    50%      { background-position: 100% 0, 48px 48px, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    html body .cb-xmas-wrap::before {
        animation: none !important;
    }
}

/* Never render the ribbon on mobile — the space above the hero is
   already tight there, and the strip would eat the whole viewport. */
@media (max-width: 768px) {
    html body .cb-xmas-wrap::before,
    html body .cb-xmas-wrap::after {
        content: none !important;
        display: none !important;
    }
}