/* Local-only design exploration. Shared application styles remain unchanged. */
:root { --bg:#f8f5f0; --panel:#fffdfa; --text:#352e2a; --muted:#73665d; --soft:#b9aa9d; --line:#dfd5ca; --line-light:#eae2d9; --accent:#8b5929; --button:#443730; }
body { background:var(--bg); color:var(--text); }
.app-header { position:relative; max-width:1280px; padding:0 30px; height:82px; margin:auto; }
.app-header h1 { font-size:25px; font-weight:400; }
.skin-brand { position:absolute; top:24px; left:30px; font-size:13px; letter-spacing:.16em; color:#57483d; }
.app-header .language-control { top:17px; right:30px; }
.app-header .header-note { color:var(--muted); }
.app-header > a { font-size:13px; color:#654a3d; }
.gift-intro { width:calc(100% - 60px); max-width:1220px; margin:10px auto 32px; display:grid; grid-template-columns:1fr 1fr; background:#eee5d8; overflow:hidden; }
.gift-copy { padding:36px 40px; align-self:center; }
.gift-copy h2 { font-size:clamp(27px,2.8vw,39px); font-weight:400; letter-spacing:-.025em; line-height:1.3; margin:0 0 16px; max-width:440px; }
.gift-copy p { max-width:400px; line-height:1.75; margin:0 0 22px; color:#65564b; font-size:15px; }
.gift-intro img { display:block; width:100%; height:300px; object-fit:cover; }
.gift-start { display:inline-flex; gap:28px; align-items:center; padding:10px 0; color:#593e30; text-decoration:none; border-bottom:1px solid #8e725d; }
.gift-start:hover { color:#8b382e; border-color:currentColor; }
.shell { max-width:1280px; scroll-margin-top:24px; }
.panel { background:var(--panel); border-color:var(--line); padding:32px; margin-bottom:18px; }
.section-title > span { color:#8b5929; background:#f4ece0; border-color:#dac8ae; border-radius:0; }
.section-title h2 { color:#49392e; }
.section-title p { color:var(--muted); }
input:not([type=range]):not([type=color]), select, textarea { background:#fffefb; border-color:#d6c8ba; color:var(--text); }
input::placeholder,textarea::placeholder { color:#84766b; }
:is(button,a,input,select,textarea):focus-visible { outline:2px solid #8b5929; outline-offset:3px; }
button { transition:background-color .18s ease,color .18s ease,border-color .18s ease; }
button:not(:disabled):not(.ghost):not(.custom-item-select):hover { opacity:1; filter:brightness(1.08); }
button.ghost { border-color:#b7a593; }
button.ghost:not(:disabled):hover { background:#f2eade; border-color:#80634d; }
.custom-item-card { background:#fffdfa; border-color:#d9cfc2; }
.custom-item-card.active { background:#faf3e9; border-color:#9b7956; }
.custom-item-heading { border-bottom:1px solid #e2d5c4; padding-bottom:10px; }
.custom-item-card .custom-item-select { background:transparent; }
.custom-item-card .custom-item-select:hover { background:transparent; }
.custom-item-delete:hover { background:#fce9e5 !important; color:#aa3b32 !important; }
.custom-item-tool-panel, .crop-tools, .lightbox-tools, .submit-card { background:#fbf7f1; border-color:var(--line); }
#submitPanel { border-top:3px solid #baa07e; }
#submitBtn:not(:disabled) { background:#693e36; }
.submission-record-panel { background:#f2ecdf; }
.gift-signoff { text-align:center; padding:28px 24px 16px; color:#786453; }
.gift-signoff p { font-size:22px; font-weight:400; margin:0 0 8px; color:#503c2f; }
.gift-signoff span { font-size:13px; }
.app-footer { color:#796e65; font-size:11px; opacity:.8; }
body.customer-record { --ink:#352e2a; --muted:#73665d; --line:#dfd5ca; --paper:#fffdfa; --accent:#443730; background:#f8f5f0; }
.customer-record .record-card { background:#fffdfa; padding:28px; margin-bottom:18px; border:1px solid #dfd5ca; }
.customer-record .record-header { border-color:#dfd5ca; }
.customer-record .notice { background:#f2ecdf; border-color:#dfd5ca; }
@media(max-width:700px) {
 .app-header { padding:0 20px; height:76px; text-align:left; }
 .skin-brand { top:22px; left:20px; font-size:11px; }
 .app-header .language-control { right:20px; top:12px; }
 .app-header h1 { font-size:23px; }
 .gift-intro { width:calc(100% - 32px); grid-template-columns:1fr; margin:0 16px 20px; }
 .gift-copy { padding:26px 24px; }
 .gift-copy h2 { font-size:29px; margin-bottom:12px; }
 .gift-copy p { font-size:14px; margin-bottom:12px; }
 .gift-intro img { height:170px; }
 .shell { padding:0 16px; }
 .panel { padding:22px 16px; margin-bottom:14px; }
 .gift-signoff p { font-size:20px; }
 .customer-record .record-card { padding:20px 16px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }
.shell { padding-top:0; }
.shell > .panel:first-child { padding-top:32px; }
@media(max-width:700px) { .shell > .panel:first-child { padding-top:22px; } }
/* Match editor chrome without recoloring the customer's artwork canvas. */
input[type=range] { accent-color:#806044; }
#cropDialog, .crop-body, .crop-controls { background:#fffdfa; color:#352e2a; }
body #lightboxDesigner { background:#fffdfa !important; }
body #lightboxDesigner .lightbox-tools { background:#fbf7f1 !important; }
body #cropDialog.is-mobile-inline[open] { background:#fffdfa !important; }

/* Requested composition: tool introduction on the left, gift message on the photo. */
.gift-copy h1 { margin:0 0 14px; font-size:30px; line-height:1.4; font-weight:400; }
.gift-copy .header-note { margin:0 0 16px; max-width:430px; }
.gift-copy > a:not(.gift-start) { display:block; width:fit-content; color:#654a3d; font-size:14px; text-underline-offset:4px; }
.gift-copy .gift-start { margin-top:22px; }
.gift-visual { position:relative; display:grid; min-height:330px; isolation:isolate; background:#443730; }
.gift-visual img { position:absolute; inset:0; height:100%; }
.gift-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(24,17,12,.12) 10%,rgba(24,17,12,.88) 100%); }
.gift-caption { position:relative; z-index:1; align-self:end; padding:32px 36px; color:#fffdfa; }
.gift-caption h2 { margin:0 0 12px; font-size:32px; line-height:1.35; font-weight:400; }
.gift-caption p { margin:0; max-width:440px; font-size:14px; line-height:1.8; }
@media(max-width:700px) {
 .gift-copy h1 { font-size:25px; }
 .gift-copy .gift-start { margin-top:18px; }
 .gift-visual { min-height:260px; }
 .gift-caption { padding:24px; }
 .gift-caption h2 { font-size:27px; }
 .gift-caption p { font-size:13px; }
}