/* Photo gifts (/gifts, gifts.js). Built on the home page styles (style, design, home.css); everything here is gift-only. */
.gift-defs{position:absolute;width:0;height:0;overflow:hidden}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gifts h2{font:800 clamp(28px,3vw,40px)/1.1 var(--display);letter-spacing:-.03em;color:#1d2427;margin:0 0 20px}

/* A warm room with blurred holiday lights, drawn in CSS behind the illustrations (and behind the try-on cards). */
.bokeh,.trying .gift-pic{background:radial-gradient(circle at 18% 22%,rgba(255,196,110,.55) 0 5%,transparent 6%),radial-gradient(circle at 80% 14%,rgba(255,170,80,.45) 0 7%,transparent 8%),
 radial-gradient(circle at 70% 78%,rgba(255,206,130,.4) 0 4%,transparent 5%),radial-gradient(circle at 10% 82%,rgba(255,150,70,.35) 0 6%,transparent 7%),
 radial-gradient(circle at 92% 52%,rgba(255,220,150,.35) 0 3%,transparent 4%),radial-gradient(ellipse at 50% 40%,#5a3a22 0,#2b1d14 70%);border-radius:14px}
.art-text{font:700 11px Georgia,"Times New Roman",serif;fill:#9a6a1c;letter-spacing:.04em}

/* Hero */
.gift-hero .hero-copy{min-width:0}
.gift-hero-art{margin:0;min-height:380px;display:flex;align-items:center;justify-content:center;gap:4%;padding:28px}
.gift-hero-art .art-heart{width:52%;max-width:340px}.gift-hero-art .art-box{width:30%;max-width:190px}
.gift-time{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;font-size:14px;line-height:1.45;color:#3c4549}
.gift-time svg,.gift-promise svg{flex:none;color:var(--brand-text);margin-top:1px}
/* The Christmas band shows only while the owner's last order day hasn't passed (ORDER_BY in gifts.js). */
.gift-deadline{margin:14px 0 0;padding:11px 16px;border-radius:10px;background:#1d2427;color:#fff;font:700 15px/1.4 var(--display);text-align:center}
.gift-deadline[hidden]{display:none}

/* Light on / off: the same switch over the cards and over the layout next to the form. */
.gift-light{display:inline-flex;gap:2px;padding:3px;border:1px solid #c9cfd1;border-radius:999px;background:#fff}
.gift-light[hidden]{display:none}
.gift-light button{min-height:44px;padding:0 15px;border:0;border-radius:999px;background:none;color:#3c4549;font:600 14px var(--display);cursor:pointer}
.gift-light button[aria-pressed=true]{background:#1d2427;color:#fff}
.gift-light button:focus-visible{outline:3px solid rgba(194,65,12,.45);outline-offset:2px}

/* Products */
.gift-products{padding:8px 0 30px;border-bottom:1px solid #e6e1d9}
.gift-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.gift-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;padding:0 0 12px;border:2px solid transparent;border-radius:16px;background:none;text-align:left;cursor:pointer;font:inherit;color:inherit}
.gift-card:hover .gift-name,.gift-card[aria-pressed=true] .gift-name{color:var(--brand-text)}
.gift-card[aria-pressed=true]{border-color:var(--brand)}
.gift-card:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.gift-pic{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1.15;margin-bottom:10px;padding:14px}
.gift-pic:has(img){aspect-ratio:1;padding:0;overflow:hidden;border-radius:14px;background:#2b2118}
.gift-pic img{display:block;width:100%;height:100%;object-fit:cover}
.gift-pic svg{width:84%;height:auto}
.gift-name,.gift-size,.gift-price{padding:0 12px}
.gift-name{font:700 18px/1.25 var(--display);color:#1d2427}
.gift-size{font-size:13px;line-height:1.4;color:#5a6468}
.gift-price{font:800 22px var(--display);color:var(--brand-text)}
.gift-note{font-size:13px;color:#5a6468;margin:16px 0 0}

/* Try-on: once a photo is chosen, each card draws it in its own piece over the example picture. */
.gift-try-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 16px}
.gift-try-bar p{flex:1 1 280px;margin:0;font:600 16px/1.4 var(--display);color:#1d2427}
.gift-try-pick{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1.5px solid var(--brand);border-radius:8px;background:#fff;color:var(--brand-text);font:700 15px var(--display);cursor:pointer}
.gift-try-pick:hover{background:#fff6ef}
.gift-try-pick:focus-visible{outline:3px solid rgba(194,65,12,.45);outline-offset:2px}
.gift-pic{position:relative}
.gift-pic .gift-try{display:none;position:absolute;inset:0;width:100%;height:100%;padding:7%;box-sizing:border-box}
.trying .gift-pic .gift-try{display:block}
.trying .gift-pic img{visibility:hidden}
.trying.off .gift-pic,.gift-stage.off{background:radial-gradient(ellipse at 50% 35%,#fbf8f2 0,#e2dace 78%)}
.trying .gift-note-pics{display:none}
.gift-try .art-text{stroke:#fff3d6;stroke-width:3px;paint-order:stroke}

/* Occasions */
.gift-occasions{padding:34px 0 28px;border-bottom:1px solid #e6e1d9}
.gift-occ-lead{margin:-8px 0 20px;font-size:16px;line-height:1.5;color:#3c4549}
.gift-occ-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gift-occ-grid li{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px 18px 8px;border:1px solid #e3ded6;border-radius:14px;background:#fff}
.gift-occ-grid h3{margin:0;font:700 18px/1.25 var(--display);color:#1d2427}
.gift-occ-grid p{flex:1;margin:0;font-size:14px;line-height:1.5;color:#3c4549}
.gift-occ-go{min-height:44px;padding:0;border:0;background:none;color:var(--brand-text);font:700 15px/1.3 var(--display);text-align:left;cursor:pointer}
.gift-occ-go:hover{text-decoration:underline}
.gift-occ-go:focus-visible{outline:3px solid rgba(194,65,12,.45);outline-offset:2px}
.gift-occ-chips{display:flex;flex-wrap:wrap;gap:8px}
.gift-occ-chips input{position:absolute;opacity:0;width:1px;height:1px}
.gift-occ-chips span{display:inline-flex;align-items:center;min-height:44px;padding:0 15px;border:1px solid #c9cfd1;border-radius:999px;box-sizing:border-box;font:600 14px var(--display);color:#2c3438;cursor:pointer}
.gift-occ-chips input:checked+span{border:2px solid var(--brand);padding:0 14px;color:var(--brand-text)}
.gift-occ-chips input:focus-visible+span{box-shadow:0 0 0 3px rgba(194,65,12,.4)}

/* How it works */
.gift-how{padding:34px 0 26px}
.gift-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:none}
.gift-steps li{display:flex;align-items:center;gap:12px;font:600 16px/1.3 var(--display);color:#2c3438}
.gift-steps svg{flex:none;color:#1d2427}
.gift-step-num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#f3e2d3;color:#1d2427;font:700 15px var(--display)}
.gift-steps small{display:block;margin-top:3px;font:400 13px/1.35 Arial,Helvetica,sans-serif;color:#5a6468}

/* Layout + form */
.gift-order{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;align-items:start;padding:8px 0 26px;scroll-margin-top:90px}
.gift-stage{margin:0;position:sticky;top:96px;display:flex;flex-direction:column;align-items:center;padding:16px 24px 18px}
.gift-stage .gift-light{align-self:flex-end;margin-bottom:6px}
.gift-stage.off figcaption{color:#5a6468}
.gift-stage svg{width:100%;max-width:520px;height:auto}
.gift-stage figcaption{color:#f6e7d4;font-size:13px;text-align:center;margin-top:10px}
.gift-form{background:#fff;border:1px solid #e3ded6;border-radius:16px;padding:24px;scroll-margin-top:90px}
.gift-form h2{font-size:26px;margin-bottom:16px}
.gift-field{display:block;margin:0 0 16px;padding:0;border:0;min-width:0}.gift-field[hidden]{display:none}
.gift-label{display:block;font:700 14px var(--display);color:#1d2427;margin:0 0 7px;padding:0}
.gift-count,.gift-opt{font-weight:400;color:#5a6468}
.gift-form select,.gift-form input:not([type=radio]):not([type=checkbox]):not([type=file]),.gift-form textarea{width:100%;box-sizing:border-box;border:1px solid #c9cfd1;border-radius:8px;padding:11px 12px;font:16px Arial,Helvetica,sans-serif;color:#1d2427;background:#fff}
.gift-form textarea{resize:vertical}
.gift-form :is(select,input,textarea):focus-visible{outline:3px solid rgba(194,65,12,.35);border-color:var(--brand)}
.gift-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:92px;padding:16px;border:1.5px dashed #b9c0c3;border-radius:10px;background:#fafaf8;color:#3c4549;font-size:15px;text-align:center;cursor:pointer;overflow-wrap:anywhere}
.gift-drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.gift-drop:focus-within{outline:3px solid rgba(194,65,12,.35);border-color:var(--brand)}
.gift-drop.drag,.gift-drop.has-file{border-color:var(--brand);background:#fff6ef}
.gift-hint{font-size:13px;color:#5a6468;margin:6px 0 0;line-height:1.45}
.gift-seg{display:flex;gap:8px}
.gift-seg label{flex:1}
.gift-seg input,.gift-bgs input{position:absolute;opacity:0;width:1px;height:1px}
.gift-seg span{display:flex;align-items:center;justify-content:center;min-height:44px;border:1px solid #c9cfd1;border-radius:8px;font:600 15px var(--display);cursor:pointer}
.gift-seg input:checked+span{border:2px solid var(--brand);color:var(--brand-text)}
.gift-seg input:focus-visible+span,.gift-bgs input:focus-visible+.bg-swatch{outline:3px solid rgba(194,65,12,.45);outline-offset:2px}
.gift-bgs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.gift-bgs label{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;line-height:1.25;text-align:center;color:#3c4549;cursor:pointer}
.bg-swatch{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:4/3;border-radius:8px;border:2px solid #e3ded6;box-sizing:border-box;color:#6c7476}
.gift-bgs input:checked+.bg-swatch{border-color:var(--brand);box-shadow:0 0 0 2px rgba(194,65,12,.2)}
.gift-bgs input:checked~span:last-child{color:var(--brand-text);font-weight:700}
.bg-keep{background:#eef0f1}
.bg-lights{background:radial-gradient(circle at 25% 35%,#ffcf7a 0 9%,transparent 11%),radial-gradient(circle at 70% 30%,#ffb35c 0 12%,transparent 14%),radial-gradient(circle at 50% 75%,#ffd98f 0 8%,transparent 10%),#3a2414}
.bg-snow{background:radial-gradient(circle at 20% 25%,#fff 0 4%,transparent 5%),radial-gradient(circle at 65% 20%,#fff 0 3%,transparent 4%),radial-gradient(circle at 80% 55%,#fff 0 4%,transparent 5%),linear-gradient(#24365e,#4b6aa8 70%,#e8eef8 71%)}
.bg-aurora{background:linear-gradient(160deg,transparent 30%,rgba(74,222,128,.85) 45%,rgba(56,189,248,.6) 58%,transparent 72%),linear-gradient(#0b1430,#1d2b52)}
.bg-studio{background:radial-gradient(circle at 50% 40%,#f4f1ec,#bfb8ae)}
.gift-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gift-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:#2c3438;margin:4px 0 12px;cursor:pointer}
.gift-check input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--brand)}
.gift-error{color:#b42318;font-size:14px;margin:0 0 10px;min-height:0}
.gift-error:empty{display:none}
.gift-send{width:100%;min-height:52px;border:0;border-radius:8px;background:var(--brand);color:#fff;font:700 17px var(--display);cursor:pointer}
.gift-send:hover:not(:disabled){background:var(--brand-hover)}
.gift-send:disabled{opacity:.7;cursor:default}
.gift-message{font-size:14px;line-height:1.5;color:#1d2427;margin:12px 0 0}
.gift-message:empty{display:none}
.gift-message .request-open{margin-left:4px}
.gift-promise{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;font-size:13px;line-height:1.45;color:#3c4549}
.gift-fine{font-size:12px;color:#5a6468;margin:10px 0 0;line-height:1.45}

.gift-trust{list-style:none;margin:6px 0 4px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;font-size:14px;color:#3c4549}
.gift-trust li{display:flex;align-items:center;gap:8px}
.gift-privacy{text-align:center;font-size:13px;color:#5a6468;margin:4px 0 20px}

@media(max-width:1000px){
 .gift-grid,.gift-occ-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .gift-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
 .gift-order{grid-template-columns:1fr}
 .gift-stage{position:static}
 .gift-stage svg{max-width:360px}
}
@media(max-width:768px){
 .gift-hero-art{min-height:240px;padding:18px}
 .gift-grid{gap:12px}
 .gift-name{font-size:16px}.gift-price{font-size:19px}
 .gift-form{padding:18px}
 .gift-bgs{grid-template-columns:repeat(3,minmax(0,1fr))}
 .gift-occ-grid{gap:10px}
 .gift-occ-grid li{padding:14px 14px 6px}
 .gift-occ-grid h3{font-size:16px}
}
@media(max-width:480px){
 .gift-steps{grid-template-columns:1fr}
 .gift-two{grid-template-columns:1fr}
 .gift-name,.gift-size,.gift-price{padding:0 6px}
}
.gift-stage .art-text{stroke:#fff3d6;stroke-width:3px;paint-order:stroke}