.knot-offer-heading { margin-bottom: 28px; }
.knot-offer-heading h1 { margin-bottom: 12px; }
.knot-offer-heading p { max-width: 650px; line-height: 1.6; }
.knot-offer { padding-bottom: 24px; }
.knot-offer-card { position: relative; min-width: 0; }
.knot-offer-card-actions { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 10px; }
.knot-offer-card-actions button { flex: 1; min-width: 0; min-height: 40px; border: 1px solid var(--knot-border); background: var(--knot-surface); color: var(--knot-text); font: 13px var(--font-mono); cursor: pointer; }
.knot-offer-card.is-selected .knot-offer-card-actions button { border-color: var(--knot-primary); }
.knot-offer-card-actions span { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 6px 8px; background: var(--knot-primary); color: var(--knot-on-primary); font: 12px var(--font-mono); font-weight: 600; white-space: nowrap; pointer-events: none; }
.knot-offer-card-actions [hidden] { display: none; }
.knot-offer-sticky-inner > .knot-offer-summary { display: grid; gap: 4px; }
.knot-offer-metrics { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 18px; }
.knot-offer-metrics [data-campaign-progress] { font-size: 16px; }
.knot-offer-metrics [data-campaign-savings] { font-size: 14px; }
.knot-offer .knot-product-grid-edge .knot-card-link { border: 0; }
.knot-pagination { width: min(1180px, calc(100% - 32px)); margin: 28px auto; color: var(--knot-text); font: 14px/1.3 var(--font-mono); }
.knot-pagination__items { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.knot-pagination__items > li { margin: 0; padding: 0; list-style: none; }
.knot-pagination__control { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 36px; min-height: 40px; padding: 8px 10px; border: 1px solid var(--knot-border); background: var(--knot-surface); color: inherit; text-decoration: none; }
.knot-pagination__control[aria-current="page"] { background: var(--knot-primary); border-color: var(--knot-primary); color: var(--knot-on-primary); font-weight: 600; }
.knot-pagination__control[aria-disabled="true"] { color: var(--knot-muted); opacity: .6; }
.knot-pagination__control[href]:hover { border-color: var(--knot-primary); }
.knot-pagination__control:focus-visible { outline: 2px solid var(--knot-focus); outline-offset: 3px; }
.knot-pagination__icon { display: block; flex: 0 0 18px; width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.knot-pagination__ellipsis { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 3px; }
@media (min-width: 721px) and (max-width: 1100px) {
    .knot-offer .knot-product-grid-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
body.knot-bundle-page { padding-bottom: var(--knot-bundle-height, 112px); }
body.knot-campaign-modal-open { overflow: hidden; }
.knot-offer-sticky { position: fixed; bottom: 0; left: 0; right: 0; z-index: 35; padding: 14px 24px max(14px, env(safe-area-inset-bottom)); background: #fff; color: #111; border-top: 1px solid #ccc; }
.knot-offer-sticky-inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.knot-offer-sticky-inner > div { display: grid; gap: 4px; margin-right: auto; min-width: 0; }
.knot-offer-sticky-inner > div span { font-size: 13px; }
.knot-offer-sticky p { flex-basis: 100%; margin: 0; }
.knot-offer-sticky p:empty, .knot-offer-select p:empty { display: none; }
.knot-offer-sticky [hidden] { display: none; }
.knot-offer-sticky [aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.knot-campaign-popup, .knot-offer-choice { max-width: calc(100% - 32px); max-height: calc(100svh - 40px); padding: 0; border: 0; border-radius: 0; color: #111; background: #fff; overflow-y: auto; overscroll-behavior: contain; }
.knot-campaign-popup { width: min(78vw, 1120px); }
.knot-campaign-popup[open] { animation: knot-campaign-enter 720ms cubic-bezier(.2,.8,.2,1) both; }
.knot-campaign-popup::backdrop, .knot-offer-choice::backdrop { background: rgb(0 0 0 / .65); }
.knot-campaign-popup[open]::backdrop { animation: knot-campaign-backdrop 700ms ease both; }
.knot-campaign-popup > .knot-drawer-close, .knot-offer-choice > .knot-drawer-close { position: absolute; z-index: 2; top: 12px; right: 12px; background: #fff; color: #111; border: 1px solid #111; width: 44px; height: 44px; }
.knot-campaign-popup > .knot-drawer-close:hover, .knot-campaign-popup > .knot-drawer-close:focus-visible, .knot-offer-choice > .knot-drawer-close:hover, .knot-offer-choice > .knot-drawer-close:focus-visible { background: #fff; color: #111; }
.knot-campaign-popup > .knot-drawer-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.knot-campaign-popup-primary { display: block; color: inherit; text-decoration: none; }
.knot-campaign-artwork { min-width: 0; }
.knot-campaign-artwork img { display: block; width: 100%; height: auto; }
.knot-campaign-placeholder { aspect-ratio: 2 / 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; padding: 32px 24px; background: #000; color: #fff; font-family: "Dx Neuegrid", var(--font-display), sans-serif; font-size: 84px; line-height: 1; font-weight: 500; letter-spacing: 0; text-align: center; }
.knot-campaign-popup-copy { padding: 28px 32px; display: flex; align-items: center; gap: 32px; }
.knot-campaign-popup-copy > div { flex: 1; min-width: 0; }
.knot-campaign-popup h2 { font-family: var(--font-display); font-size: 28px; line-height: 1.15; margin: 0 0 12px; }
.knot-campaign-popup p { margin: 0; line-height: 1.6; }
.knot-campaign-popup-copy .knot-btn { flex-shrink: 0; gap: 24px; }
.knot-campaign-popup[open] .knot-campaign-popup-copy { animation: knot-campaign-content 600ms 120ms ease both; }
.knot-campaign-banner { width: 100%; margin: 0; padding: 0; }
.knot-campaign-banner > a { display: block; color: inherit; text-decoration: none; }
.knot-campaign-banner-picture { display: block; }
.knot-campaign-banner-picture img { display: block; width: 100%; height: auto; }
.knot-campaign-banner-fallback { display: grid; justify-items: center; gap: 18px; padding: 40px 24px; background: #000; color: #fff; text-align: center; }
.knot-campaign-banner-fallback h2 { margin: 0; font-family: "Dx Neuegrid", var(--font-display), sans-serif; font-size: 48px; line-height: 1.1; }
.knot-campaign-banner-fallback p { max-width: 650px; margin: 0; line-height: 1.6; }
.knot-campaign-banner .is-mobile-only { display: none; }
.knot-campaign-banner .knot-btn { background: #fff; color: #111; flex-shrink: 0; gap: 24px; }
.knot-campaign-strip { display: flex; justify-content: center; gap: 24px; align-items: center; flex-wrap: wrap; padding: 14px 24px; margin-bottom: 24px; background: #111; color: #fff; text-decoration: none; font-family: var(--font-mono); font-size: 13px; }
.knot-campaign-strip:hover, .knot-campaign-strip:focus-visible { color: #fff; }
.knot-offer-choice { width: 880px; }
.knot-offer-choice-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.knot-offer-choice-image { width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; align-self: start; background: #fff; }
.knot-offer-choice-copy { min-width: 0; padding: 56px 28px 28px; }
.knot-offer-choice h2 { margin: 0 0 16px; font-family: var(--font-display); font-size: 28px; line-height: 1.2; overflow-wrap: anywhere; }
.knot-offer-choice-price { font-weight: 600; }
.knot-offer-select { display: grid; grid-template-columns: minmax(0, 1fr) 100px; gap: 16px; margin: 24px 0; }
.knot-offer-select label { display: grid; min-width: 0; gap: 8px; font-size: 14px; }
.knot-offer-select select, .knot-offer-select input { min-width: 0; width: 100%; min-height: 44px; padding: 10px; border: 1px solid #ccc; background: #fff; color: #111; font: inherit; }
.knot-offer-select > button, .knot-offer-select > p { grid-column: 1 / -1; margin: 0; }
.knot-offer-select button:disabled { opacity: .45; cursor: not-allowed; }
.knot-campaign-artwork-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 28px 0; }
.knot-campaign-artwork-field { display: grid; align-content: start; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.knot-campaign-artwork-field legend { padding: 0; margin-bottom: 12px; font-size: 16px; font-weight: 600; }
.knot-campaign-artwork-field p { margin: 0; font-size: 13px; line-height: 1.5; }
.knot-campaign-artwork-field label { display: grid; gap: 8px; min-width: 0; }
.knot-campaign-artwork-field input[type="file"] { width: 100%; min-width: 0; font: inherit; font-size: 13px; }
.knot-campaign-artwork-field small { line-height: 1.5; }
.knot-campaign-artwork-field .knot-campaign-artwork-remove { display: flex; align-items: center; gap: 8px; }
.knot-campaign-artwork-remove input { width: 16px; min-height: 16px; margin: 0; }
.knot-campaign-artwork-preview { display: block; width: auto; height: auto; max-width: 100%; max-height: 220px; margin: 0; }
.knot-campaign-artwork-fields [hidden] { display: none; }
@keyframes knot-campaign-enter { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
@keyframes knot-campaign-backdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes knot-campaign-content { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.knot-campaign-admin, .knot-order-returns { width: 100%; max-width: 1100px; margin: 0; padding: 28px; color: #111; }
.knot-campaign-admin > .knot-actions-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.knot-campaign-admin input[type="search"] { min-width: 0; max-width: 100%; min-height: 42px; padding: 10px; border: 1px solid #ccc; }
.knot-campaign-admin h2, .knot-order-returns h2 { font-size: 19px; margin: 24px 0 14px; }
.knot-campaign-fields { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 24px 0; }
.knot-campaign-fields label { display: grid; align-content: start; gap: 8px; min-width: 0; }
.knot-campaign-fields :is(input, select, textarea) { min-width: 0; width: 100%; font: inherit; padding: 10px; border: 1px solid #ccc; color: #111; background: #fff; }
.knot-campaign-fields input[type="checkbox"] { width: auto; }
.knot-campaign-fields input:not([type="checkbox"]) { min-height: 42px; }
.knot-campaign-fields textarea { min-height: 94px; }
.knot-campaign-product-list { margin-bottom: 20px; }
.knot-campaign-product-list > label { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #ddd; cursor: pointer; }
.knot-campaign-product-list img { object-fit: cover; flex-shrink: 0; }
.knot-campaign-product-list input[type="checkbox"] { flex: 0 0 16px; width: 16px; height: 16px; min-height: 16px; margin: 0; padding: 0; }
.knot-campaign-product-list span { flex: 1; overflow-wrap: anywhere; }
.knot-campaign-product-list strong { font-size: 13px; }
.knot-return-totals { display: flex; flex-wrap: wrap; gap: 16px 32px; margin: 20px 0; padding: 16px 0; border-block: 1px solid #ddd; }
.knot-return-totals div { display: grid; gap: 6px; }
.knot-return-totals dd { margin: 0; font-weight: 700; }
.knot-pos-payment-options label { position: relative; }
.knot-pos-payment-options input.sr-only { width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; border: 0; }
.knot-pos-payment-options label:focus-within span { outline: 2px solid #111; outline-offset: 2px; }
.knot-order-returns input[type="number"] { max-width: 100px; padding: 8px; font: inherit; }
.knot-order-returns input[type="checkbox"] { width: auto; }
.knot-order-returns .knot-form > label { display: flex; align-items: center; gap: 10px; margin: 16px 0; }
.knot-order-returns .knot-form > label input[type="checkbox"] { flex: 0 0 16px; width: 16px; height: 16px; min-height: 16px; margin: 0; padding: 0; }
.knot-order-returns .knot-table-wrap { max-width: 100%; overflow-x: auto; }
.knot-order-returns :focus-visible, .knot-campaign-admin :focus-visible, .knot-offer :focus-visible, .knot-campaign-popup :focus-visible { outline: 2px solid #111; outline-offset: 3px; }
@media (max-width: 720px) {
    .knot-campaign-admin, .knot-order-returns { padding: 20px 16px; }
    .knot-offer-select select, .knot-offer-select input { font-size: 16px; }
    .knot-offer-sticky { padding: 12px 12px max(12px, env(safe-area-inset-bottom)); }
    .knot-offer-sticky-inner { gap: 10px; }
    .knot-offer-sticky-inner > div { width: 100%; margin: 0; display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
    .knot-offer-sticky-inner > a { flex: 1; padding: 12px 8px; font-size: 13px; }
    .knot-campaign-fields { grid-template-columns: minmax(0, 1fr); }
    .knot-campaign-fields :is(input, select, textarea) { font-size: 16px; }
    .knot-campaign-admin input[type="search"], .knot-order-returns input[type="number"] { font-size: 16px; }
    .knot-campaign-popup, .knot-offer-choice { width: calc(100% - 24px); max-width: none; max-height: calc(100svh - 24px); }
    .knot-campaign-placeholder { padding: 24px 16px; font-size: 40px; gap: 4px; }
    .knot-campaign-popup-copy { padding: 24px; gap: 20px; flex-direction: column; align-items: stretch; }
    .knot-campaign-popup h2 { font-size: 24px; }
    .knot-campaign-popup p { font-size: 14px; }
    .knot-campaign-banner .is-desktop-only { display: none; }
    .knot-campaign-banner-picture.is-mobile-only { display: block; }
    .knot-campaign-banner-fallback.is-mobile-only { display: grid; }
    .knot-campaign-banner-fallback { padding: 32px 24px; }
    .knot-campaign-banner-fallback h2 { font-size: 36px; }
    .knot-campaign-banner-fallback p { font-size: 14px; }
    .knot-campaign-artwork-fields { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .knot-campaign-strip { gap: 8px 16px; padding: 12px; font-size: 12px; }
    .knot-offer-choice-layout { grid-template-columns: minmax(0, 1fr); }
    .knot-offer-choice-image { height: min(30svh, 220px); }
    .knot-offer-choice-copy { padding: 20px; }
    .knot-offer-choice h2 { font-size: 24px; }
    .knot-offer-select { margin: 20px 0; }
    .knot-campaign-product-list { font-size: 13px; }
    .knot-campaign-product-list > label { flex-wrap: wrap; }
    .knot-campaign-product-list strong { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .knot-campaign-popup[open], .knot-campaign-popup[open]::backdrop, .knot-campaign-popup[open] .knot-campaign-popup-copy { animation: none; transition: none; } }
