/* Warm storefront treatment for the personalized name-keychain studio. */
body.front-body[data-page="keychain"],body.front-body[data-page="quote"]{background:#fffcfa}
body.front-body main.front-main:has(#keychain){max-width:1440px!important;padding:30px 30px 56px!important}
#keychain{--kc-bg:#fff5eb;--kc-card:#fff;--kc-text:#09132d;--kc-line:#eddfd3;--kc-accent:#c74710;--kc-muted:#786354;background:transparent;padding:0;border-radius:0}
#keychain .kc-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:stretch;padding:0;margin:0 0 20px;border:1px solid #f0ded0;border-radius:24px;background:linear-gradient(115deg,#fff0e4,#fffaf6);overflow:hidden}
#keychain .kc-heading-copy{padding:34px 36px;align-self:center;min-width:0}
#keychain .kc-heading .eyebrow{color:#ad3d10;font-size:11px;letter-spacing:.12em}
#keychain .kc-heading h1{font-size:clamp(28px,3vw,40px);line-height:1.45;letter-spacing:-.6px;color:#09132d;margin:14px 0}
#keychain .kc-heading h1 em{color:#c74710;font-style:normal;display:inline-block}
#keychain .kc-heading p{color:#786354;line-height:1.9;font-size:14px;max-width:52ch;margin:0 0 20px}
#keychain .kc-hero-start{display:inline-flex;align-items:center;min-height:46px;padding:11px 18px;border-radius:11px;background:#c74710;color:#fff;text-decoration:none;font-size:14px;font-weight:700}
#keychain .kc-hero-start:hover{background:#a9370b}
#keychain .kc-heading-art{display:flex;flex-direction:column;min-width:0;margin:0;background:#fff3e7}
#keychain .kc-heading-art img{display:block;flex:1;width:100%;height:100%;min-height:280px;max-height:380px;object-fit:cover}
#keychain .kc-heading-art figcaption{padding:9px 14px;background:#fff7ef;color:#786354;font-size:11px;line-height:1.6;text-align:center}
#keychain .kc-workspace-toolbar{padding:12px 16px;border:1px solid var(--kc-line);border-radius:14px;background:var(--kc-card);margin-bottom:12px}
#keychain .kc-actions{display:flex;position:static;max-width:none;width:100%;justify-content:flex-start;align-items:center;gap:8px;margin:0}
#keychain .kc-actions button{min-height:44px;padding:10px 14px}
#keychain .kc-draft-status{width:auto;flex:1;order:0;text-align:right;margin:0 8px;color:var(--kc-muted)}
#keychain .studio-jump-links{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 22px;border:0;background:transparent}
#keychain .studio-jump-links a{display:flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid var(--kc-line);border-radius:10px;color:var(--kc-accent);background:var(--kc-card);font-size:13px;text-decoration:none}
#keychain .kc-left,#keychain .kc-preview-card,#keychain .kc-print-info,#keychain #kc-order-panel{box-shadow:0 6px 24px #5d331706;border-color:var(--kc-line)}
#keychain:not(.kc-dark) button[aria-pressed=true]{background:#fff0e4;border-color:#c74710;color:#a6380c}
#keychain .kc-step-number{background:var(--kc-bg);color:var(--kc-accent)}
#keychain:not(.kc-dark) .kc-live-badge{background:#fff0e4;color:#a6380c}
#keychain .kc-live-badge:before{background:var(--kc-accent)}
#keychain:not(.kc-dark) #kc-stage{background:radial-gradient(ellipse at 50% 38%,#fffaf4,#f5ebdf 70%,#eddfcf)}
#keychain:not(.kc-dark) #kc-order-panel{background:linear-gradient(145deg,#fff,#fff4ea)}
#keychain #kc-price{color:var(--kc-accent)}
#keychain .kc-export button:first-child,#keychain .kc-price>button,#keychain .kc-price form button,#keychain .kc-primary-link,#keychain #kc-submit{background:var(--kc-accent)!important;border-color:var(--kc-accent)!important;color:#fff!important}
#keychain:not(.kc-dark) .kc-template-sample:not(.kc-template-pill){background:#c74710;box-shadow:0 3px 0 #96320b;color:#fff}
#keychain :is(button,input,select,textarea,summary,a):focus-visible{outline:3px solid #168aef;outline-offset:3px}
#keychain input[type=range],#keychain input[type=checkbox]{accent-color:var(--kc-accent)}
#keychain.kc-dark{--kc-bg:#29221d;--kc-card:#332c26;--kc-text:#fff4e9;--kc-line:#5c493a;--kc-accent:#ffab75;--kc-muted:#d0bba9;background:#241f1a;padding:20px;border-radius:20px}
#keychain.kc-dark #kc-stage{background:radial-gradient(ellipse,#4a3b2f,#2d251f)}
#keychain.kc-dark button[aria-pressed=true],#keychain.kc-dark .kc-live-badge{background:#513725;color:#ffbd91}
#keychain.kc-dark #kc-order-panel .kc-primary-link,#keychain.kc-dark #kc-submit{background:#c74710!important;color:#fff!important}
@media(max-width:1050px){#keychain .kc-heading-copy{padding:28px 24px}#keychain .kc-heading h1{font-size:30px}}
@media(max-width:760px){body.front-body main.front-main:has(#keychain){padding:18px 14px 36px!important}#keychain{padding:0}#keychain.kc-dark{padding:12px}#keychain .kc-heading{display:grid;grid-template-columns:minmax(0,1fr);border-radius:20px}#keychain .kc-heading-copy{padding:26px 22px}#keychain .kc-heading h1{font-size:28px}#keychain .kc-heading-art img{height:auto;min-height:0;max-height:280px;aspect-ratio:3/2}#keychain .kc-heading .eyebrow{font-size:10px}#keychain .kc-workspace-toolbar{padding:10px}#keychain .kc-draft-status{flex-basis:100%;order:2;text-align:left;margin:4px 0}#keychain .studio-jump-links a{flex:1;justify-content:center;font-size:11px;padding:8px}#keychain .kc-heading-art figcaption{font-size:10px}}