/* Quote cards and "Listen to this post". Mobile first. */
.kk-tts { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; border: 1px solid var(--burgundy, #5c2a29); border-radius: 999px; background: transparent; color: var(--burgundy, #5c2a29); font: 600 .72rem/1 var(--sans, Arial); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; vertical-align: middle; }
.kk-tts::before { content: ""; width: 0; height: 0; margin-right: .55rem; border-style: solid; border-width: .32rem 0 .32rem .55rem; border-color: transparent transparent transparent currentColor; }
.kk-tts[aria-pressed="true"]::before { width: .55rem; height: .65rem; border: 0; border-left: .18rem solid currentColor; border-right: .18rem solid currentColor; }
.kk-tts:hover, .kk-tts:focus-visible { background: var(--burgundy, #5c2a29); color: var(--cream, #f8f6ed); }
.kk-tts[hidden] { display: none; }
.photo-hero .kk-tts { border-color: var(--cream, #f8f6ed); color: var(--cream, #f8f6ed); }
.photo-hero .kk-tts:hover { background: var(--cream, #f8f6ed); color: var(--burgundy, #5c2a29); }
.kk-tts-now { background: rgba(232, 208, 208, .55); box-shadow: -.4rem 0 0 rgba(232, 208, 208, .55), .4rem 0 0 rgba(232, 208, 208, .55); border-radius: 2px; transition: background .3s; }
.kk-tts-bar { position: fixed; z-index: 75; left: 50%; bottom: 1rem; transform: translateX(-50%); display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem .5rem 1.1rem; border-radius: 999px; background: var(--chocolate, #3f291e); color: var(--cream, #f8f6ed); box-shadow: 0 8px 24px rgba(40, 24, 17, .35); font: 600 .78rem/1 var(--sans, Arial); }
.kk-tts-bar[hidden] { display: none; }
.kk-tts-bar button { min-height: 2.5rem; padding: 0 1rem; border: 0; border-radius: 999px; background: rgba(248, 246, 237, .16); color: inherit; font: inherit; cursor: pointer; }
.kk-tts-bar button:hover, .kk-tts-bar button:focus-visible { background: var(--cream, #f8f6ed); color: var(--chocolate, #3f291e); }
.has-mini .kk-tts-bar { bottom: 4.75rem; }

.kk-qc-fab { position: absolute; z-index: 80; min-height: 2.75rem; padding: 0 1.1rem; border: 0; border-radius: 999px; background: var(--burgundy, #5c2a29); color: var(--cream, #f8f6ed); box-shadow: 0 6px 18px rgba(40, 24, 17, .35); font: 600 .74rem/1 var(--sans, Arial); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.kk-qc-fab[hidden] { display: none; }
.kk-qc-btn { display: inline-block; margin-top: .9rem; min-height: 2.5rem; padding: 0 1rem; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: var(--burgundy, #5c2a29); font: 600 .7rem/1 var(--sans, Arial); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.kk-qc-btn:hover, .kk-qc-btn:focus-visible { background: var(--burgundy, #5c2a29); color: var(--cream, #f8f6ed); }
.kk-panel-burgundy .kk-qc-btn, .is-style-panel-burgundy .kk-qc-btn { color: var(--cream, #f8f6ed); }
.kk-qc { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--cream, #f8f6ed); color: var(--chocolate, #3f291e); }
.kk-qc[open] { display: flex; flex-direction: column; }
.kk-qc::backdrop { background: rgba(40, 24, 17, .6); }
.kk-qc__head { display: flex; align-items: center; justify-content: space-between; padding: .5rem 1rem; }
.kk-qc__head h2 { margin: 0; font-size: 1.6rem; }
.kk-qc__x { width: 2.75rem; height: 2.75rem; border: 0; background: none; font: 300 2rem/1 var(--sans, Arial); color: inherit; cursor: pointer; }
.kk-qc__stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: .5rem 1rem; background: var(--beige, #eadfcf); overflow: hidden; }
.kk-qc__stage canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 10px 30px rgba(40, 24, 17, .25); }
.kk-qc__opts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.5rem; padding: .8rem 1rem 0; }
.kk-qc__group { display: flex; flex-wrap: wrap; gap: .5rem; }
.kk-qc__swatch { width: 2.5rem; height: 2.5rem; border: 2px solid rgba(63, 41, 30, .25); border-radius: 50%; cursor: pointer; }
.kk-qc__swatch[aria-pressed="true"] { border-color: var(--burgundy, #5c2a29); box-shadow: 0 0 0 3px var(--cream, #f8f6ed), 0 0 0 5px var(--burgundy, #5c2a29); }
.kk-qc__sizes button { min-height: 2.5rem; padding: 0 .9rem; border: 1px solid var(--chocolate, #3f291e); border-radius: 999px; background: transparent; color: inherit; font: 600 .72rem/1 var(--sans, Arial); cursor: pointer; }
.kk-qc__sizes button[aria-pressed="true"] { background: var(--chocolate, #3f291e); color: var(--cream, #f8f6ed); }
.kk-qc__foot { display: flex; gap: .6rem; padding: .9rem 1rem calc(.9rem + env(safe-area-inset-bottom)); }
.kk-qc__foot button { flex: 1; min-height: 3rem; border: 1px solid var(--burgundy, #5c2a29); border-radius: 999px; background: transparent; color: var(--burgundy, #5c2a29); font: 600 .78rem/1 var(--sans, Arial); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.kk-qc__foot .kk-qc__primary { background: var(--burgundy, #5c2a29); color: var(--cream, #f8f6ed); }
.kk-qc__foot button[hidden] { display: none; }
@media (min-width: 800px) { .kk-qc { width: min(46rem, 94vw); height: min(56rem, 94dvh); margin: auto; border-radius: 12px; } }

.kk-tts-bar select { max-width: 11rem; min-height: 2.5rem; padding: 0 .6rem; border: 0; border-radius: 999px; background: rgba(248, 246, 237, .16); color: inherit; font: inherit; }
.kk-tts-bar select option { color: #3f291e; }
.kk-tts-bar select[hidden] { display: none; }