/* Christmas list and "drop a hint" (Josh's Claude, 4 Nov 2026). Drawn from the approved mock-ups
   (https://claude.ai/artifact/PFjWGyoszj8T7HN18i3wEw). Loaded by the builder, the keepsakes page, the gift page and the
   two list pages; every rule is scoped to a list class, so nothing else on those pages changes. */
.lst-hide{display:none !important;}
/* (a) the hint card in the builder */
.hint-card{display:flex; gap:12px; padding:12px 14px; border:1.5px solid var(--gold); border-radius:12px; background:rgba(200,162,74,.08); text-align:left;}
.hint-card b{display:block; font-family:var(--f-head); font-size:15px; color:var(--ink);}
.hint-card .hc-txt{display:block; font-size:13px; color:var(--ink-700); line-height:1.45; margin-top:2px;}
.hc-ic{flex:none; width:34px; height:34px; border-radius:50%; background:var(--gold); color:var(--ink); display:flex; align-items:center; justify-content:center;}
.hc-ic svg{width:18px; height:18px;}
.hc-btns{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; align-items:center;}
.hc-btns .btn{min-height:36px; padding:6px 12px; font-size:13px;}
.hc-btns .btn svg{width:15px; height:15px;}
.hint-card.on{border-style:solid; border-color:#bfe3c6; background:#eef8f0;}
.hint-card.on .hc-ic{background:#1f5230; color:#fff;}
.hint-card.on b{color:#1f5230;}
.lst-link{background:none; border:0; padding:6px 4px; font:600 13px/1.2 var(--f-head); color:var(--ink-700); display:inline-flex; gap:6px; align-items:center; cursor:pointer;}
.lst-link svg{width:15px; height:15px;}
.lst-link u{text-underline-offset:3px;}
.any-hint{display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:12px; background:var(--paper-card); border:1px solid var(--line); font-size:13.5px; color:var(--ink);}
.any-hint svg{width:18px; height:18px; flex:none; color:var(--gold-deep);}
.any-hint button{background:none; border:0; padding:0; font:inherit; font-weight:600; text-decoration:underline; text-underline-offset:3px; color:var(--ink); cursor:pointer; text-align:left;}
/* (b) the builder's last step */
.lst-not-buying{padding:12px 14px; border-radius:12px; background:#eef3f8; border:1px solid #cfdbe8; font-size:14px; line-height:1.5; color:var(--ink);}
.lst-not-buying b{font-family:var(--f-head);}
.fn .fn-two{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px;}
.fn .fn-two .btn, .lst-two .btn{padding:8px 8px; font-size:13px; min-height:40px; white-space:normal; line-height:1.15; gap:6px;}
.fn .fn-two .btn svg, .lst-two .btn svg{width:16px; height:16px; flex:none;}
.lst-two{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.btn.is-on{border-color:#bfe3c6; background:#eef8f0; color:#1f5230; flex-direction:column; gap:0;}
.btn.is-on svg{display:none;}
.btn.is-on small{font-size:11.5px; font-weight:600; text-decoration:underline; text-underline-offset:2px; color:var(--gold-deep);}
.fn-note{margin:6px 0 0; font-size:12px; text-align:center; color:var(--ink-700);}
.photo-line{display:flex; gap:8px; align-items:center; margin:0; font-size:12.5px; color:var(--ink-700);}
.photo-line svg{width:17px; height:17px; flex:none; color:var(--label);}
.lst-onlist-line{display:flex; gap:8px; align-items:flex-start; padding:12px 14px; border-radius:12px; border:1px solid #bfe3c6; background:#eef8f0; color:#1f5230; font-size:13.5px; line-height:1.45;}
.lst-onlist-line b{display:block; font-family:var(--f-head); font-size:14.5px;}
.lst-onlist-line span{color:var(--ink-700);}
/* bottom sheets: the first name, sharing, "added" */
.lst-scrim{position:fixed; inset:0; background:rgba(11,13,15,.5); z-index:9000;}
.lst-sheet{position:fixed; left:0; right:0; bottom:0; z-index:9001; max-width:560px; margin:0 auto; max-height:92vh; overflow:auto; background:var(--paper); border-radius:20px 20px 0 0; padding:10px 18px calc(22px + env(safe-area-inset-bottom)); box-shadow:0 -10px 40px rgba(0,0,0,.25); display:flex; flex-direction:column; gap:12px; text-align:left;}
@media (min-width:700px){ .lst-sheet{bottom:50%; transform:translateY(50%); border-radius:20px; padding-bottom:22px;} }
.sh-grab{width:40px; height:5px; border-radius:3px; background:var(--line); margin:0 auto 2px;}
.sh-h{font-size:1.35rem; margin:0;}
.sh-p{font-size:14px; margin:0;}
.sh-small{font-size:12px; color:var(--label); margin:0;}
.lst-sheet label.plabel{display:block;}
.lst-sheet input[type=text], .lst-sheet input[type=email]{width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--r-tight); background:#fff; font-size:16px;}
.lst-err{color:#a8321f; font-size:13px; margin:0;}
.msg-edit{width:100%; min-height:96px; padding:12px; border:1.5px solid var(--ink); border-radius:10px; background:#fff; font:400 15px/1.45 var(--f-body, inherit); color:var(--ink); resize:vertical;}
.share-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.sh-opt{display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--ink); background:none; border:0; padding:0; cursor:pointer; text-decoration:none;}
.sh-opt i{width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--paper-card); border:1px solid var(--line); font-style:normal;}
.sh-opt i svg{width:24px; height:24px;}
.sh-opt.wa i{background:#25D366; border-color:#25D366; color:#fff; font-family:var(--f-head); font-weight:800; font-size:22px;}
.sh-opt.sms i{background:#34C759; border-color:#34C759; color:#fff;}
.toast-ok{display:flex; gap:10px; align-items:center; padding:11px 13px; border-radius:12px; background:#e9f6ec; border:1px solid #bfe3c6; color:#1f5230; font-size:13.5px; font-weight:600;}
.toast-ok svg{width:18px; height:18px; flex:none;}
.toast-ok a, .toast-ok button{text-decoration:underline; color:inherit; background:none; border:0; padding:0; font:inherit; cursor:pointer;}
/* the email box and private link */
.mail-box{display:flex; flex-direction:column; gap:6px; padding:12px; border-radius:12px; background:var(--paper-deep);}
.mail-box b{display:flex; gap:6px; align-items:center; font-family:var(--f-head); font-size:14.5px; color:var(--ink);}
.mail-box b svg{width:18px; height:18px;}
.mail-box > span{font-size:12.5px; color:var(--ink-700); line-height:1.4;}
.row2{display:flex; gap:6px; flex-direction:column;}
.row2 input{flex:1; min-width:0; padding:10px 12px; border:1.5px solid var(--line); border-radius:var(--r-tight); background:#fff; font-size:16px;}
.row2 .btn{width:100%; padding:8px 12px; font-size:14px; min-height:42px;}
.plabel{font-family:var(--f-data); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--label); margin-top:2px;}
.plink{display:flex; gap:6px; align-items:center;}
.plink code{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--f-data); font-size:11.5px; padding:9px 10px; border:1.5px solid var(--line); border-radius:var(--r-tight); background:#fff; color:var(--ink-700);}
.plink .btn{min-height:38px; padding:6px 12px; font-size:13px; flex:none; gap:6px;}
.plink .btn svg{width:15px; height:15px;}
.lst-ok-line{font-size:13px; color:#1f5230; font-weight:600; margin:0;}
/* (c) keepsake cards */
.lst-card-wrap{position:relative;}
.lst-card-wrap > .ks-card{width:100%;}
.tag-btn{position:absolute; top:10px; right:10px; z-index:2; width:38px; height:38px; border-radius:50%; border:0; background:rgba(251,249,244,.95); color:var(--ink); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); cursor:pointer;}
.tag-btn svg{width:18px; height:18px;}
.tag-btn.on{background:var(--gold);}
.tag-btn.on svg path{fill:var(--ink);}
.onlist{display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; color:#1f5230; margin:4px 16px 0;}
.onlist svg{width:13px; height:13px;}
.lst-card-wrap .li-a{display:block; margin:2px 16px 12px; font-size:12px;}
.ks-list-toast{margin:0 0 16px;}
.ks-list-btns{margin-top:10px;}
/* (e) the fan's list and (f) the buyer's page */
.lst-page{max-width:560px; margin:0 auto; padding:24px 18px 48px; display:flex; flex-direction:column; gap:14px;}
.lst-page h1{font-size:clamp(1.9rem,6vw,2.4rem); margin:0;}
.lst-page .eyebrow{margin:0;}
.wl-sub{font-size:13.5px; margin:-6px 0 0; color:var(--ink-700);}
.lst-page .field label{font-family:var(--f-data); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--label);}
.lst-page textarea{width:100%; padding:12px; border:1.5px solid var(--line); border-radius:var(--r-tight); background:#fff; font-size:16px; line-height:1.4; resize:vertical;}
.cc{display:block; text-align:right; font-family:var(--f-data); font-size:10.5px; color:var(--label); margin-top:3px;}
.li-list{display:flex; flex-direction:column; gap:10px;}
.li{display:flex; gap:12px; align-items:center; padding:10px; background:var(--paper-card); border:1px solid var(--line); border-radius:12px;}
.li-img{width:104px; flex:none; display:flex; justify-content:center;}
.li-img img.kimg{width:62px; height:auto; display:block; box-shadow:var(--shadow);}
.li-stub{width:104px; aspect-ratio:186/90; position:relative; border-radius:4px; overflow:hidden;}
.li-b{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.li-b b{font-family:var(--f-head); font-size:14.5px; line-height:1.2; color:var(--ink);}
.li-b span{font-size:12.5px; color:var(--ink-700); line-height:1.35;}
.li-a{font-size:12.5px; text-decoration:underline; text-underline-offset:3px; color:var(--gold-deep); font-weight:600; background:none; border:0; padding:0; text-align:left; cursor:pointer;}
.li-x{width:34px; height:34px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--label); background:none; border:0; cursor:pointer;}
.li-x svg{width:16px; height:16px;}
.li-sizes{display:flex; flex-wrap:wrap; gap:4px; margin-top:4px;}
.li-sizes button{font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid var(--line); background:#fff; cursor:pointer;}
.li-sizes button.on{border-color:var(--ink); background:var(--ink); color:#fff;}
.anym{width:100px; aspect-ratio:186/90; border-radius:6px; border:2px solid var(--gold); display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--f-display); font-size:15px; line-height:1; color:var(--gold-deep); background:rgba(200,162,74,.08);}
.share-box{display:flex; flex-direction:column; gap:6px;}
.share-box .btn svg{width:18px; height:18px;}
.peek{font-size:12.5px; text-align:center; color:var(--label); margin:0;}
.foot-link{text-align:center; font-size:12.5px; margin:0;}
.foot-link button, .foot-link a{color:var(--label); text-decoration:underline; background:none; border:0; padding:0; font:inherit; cursor:pointer;}
.fan-note{padding:10px 12px; border-left:3px solid var(--gold); background:var(--paper-card); font-size:15px; color:var(--ink); font-style:italic; white-space:pre-wrap; overflow-wrap:anywhere;}
.fan-note span{display:block; font-style:normal; font-family:var(--f-data); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--label);}
.howto{font-size:14px; margin:0;}
.lst-fanbar{padding:10px 12px; border-radius:12px; background:#eef8f0; border:1px solid #bfe3c6; color:#1f5230; font-size:13.5px;}
.lst-fanbar a{color:inherit; text-decoration:underline; font-weight:700;}
.bi{padding:10px; background:var(--paper-card); border:1px solid var(--line); border-radius:12px; display:flex; flex-direction:column; gap:8px;}
.bi-top{display:flex; gap:12px; align-items:center;}
.bi-p{font-family:var(--f-head); font-weight:700; font-size:13.5px; color:var(--ink) !important;}
.bi-btns{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
.bi-btns .btn{padding:7px 6px; font-size:13px; min-height:40px; white-space:normal; line-height:1.15;}
.bi-btns.one{grid-template-columns:1fr;}
.bi.bought .bi-top{opacity:.45; filter:grayscale(1);}
.bi-state{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700;}
.bi-state svg{width:16px; height:16px;}
.bi-state.bought{color:#1f5230;}
.bi-state.buying{color:#6b5413; background:#fbf3df; border:1px solid #ecd8a3; border-radius:8px; padding:6px 10px;}
.bi-state.retired{color:var(--ink-700); font-weight:600;}
.bi-change{font-size:12.5px; text-align:center;}
.bi-change a{color:var(--gold-deep); text-decoration:underline; font-weight:600;}
.bi-confirm{padding:10px; border-radius:10px; background:#fbf3df; border:1px solid #ecd8a3; font-size:13.5px; color:#6b5413; display:flex; flex-direction:column; gap:8px;}
.lot{display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:12px; border:2px solid var(--gold); background:rgba(200,162,74,.08);}
.lot b{display:flex; gap:6px; align-items:center; font-family:var(--f-head); font-size:15px; color:var(--ink);}
.lot b svg{width:18px; height:18px;}
.lot > span{font-size:13px; color:var(--ink-700); line-height:1.45;}
.lot-pick{display:flex; flex-direction:column; gap:6px;}
.lot-pick label{display:flex; gap:8px; align-items:center; font-size:13.5px; color:var(--ink);}
.lst-more{text-align:center; font-size:14px;}
.lst-more a{color:var(--ink); font-weight:700; text-decoration:underline;}
.lst-gone{padding:18px; text-align:center; border-radius:12px; background:var(--paper-card); border:1px solid var(--line);}
/* (g) the gift page from a list */
.from-list{display:flex; align-items:center; gap:8px; padding:10px 16px; background:var(--ink); color:var(--paper); font-size:13.5px;}
.from-list svg{width:16px; height:16px; color:var(--gold); flex:none;}
.from-list b{color:var(--gold-soft);}
.from-list a{margin-left:auto; text-decoration:underline; color:var(--paper); font-size:12.5px; white-space:nowrap;}
.from-list-left{margin:10px 0 0; padding:10px 12px; border-radius:10px; background:#fbf3df; border:1px solid #ecd8a3; color:#6b5413; font-size:13.5px;}
/* (d) basket: a line bought from a list */
.cart-list-for{display:block; font-size:12.5px; color:var(--gold-deep); font-weight:600;}
.cart-list-warn{display:block; font-size:12.5px; color:#6b5413; background:#fbf3df; border:1px solid #ecd8a3; border-radius:8px; padding:6px 8px; margin-top:4px;}
.lst-card-wrap{display:flex; flex-direction:column;}
.lst-card-wrap[hidden]{display:none;}
.lst-card-wrap > .ks-card{flex:1;}
.lst-card-wrap > .li-a{position:absolute; left:var(--s3,16px); bottom:14px; margin:0; z-index:2;}
.lst-card-wrap .ks-card-meta:has(.onlist){padding-bottom:40px;}
.li-stub iframe{width:100%; height:100%; border:0; display:block; pointer-events:none;}
.li-stub{box-shadow:var(--shadow); border-radius:1.9% / 3.9%;}
/* Josh's review, 7 Nov 2026: the list buttons sit in the page on the last step, not in the sticky bar */
.lst-box .fn-two{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px;}
.lst-box .fn-two .btn{padding:8px 8px; font-size:13.5px; min-height:42px; white-space:nowrap; line-height:1.15; gap:6px;}
.lst-box .fn-two .btn svg{width:16px; height:16px; flex:none;}
.lst-box .btn.is-on{flex-direction:row; gap:6px;}
.lst-box .btn.is-on svg{display:inline-block;}
.lst-for-strip{display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; background:#eef3f8; border:1px solid #cfdbe8; font-size:13.5px; font-weight:600; color:var(--ink); margin:0 0 12px;}
.lst-for-strip svg{width:16px; height:16px; flex:none;}