/* ─── gift ─────────────────────────── */

.hb-page--gift * { margin: 0; padding: 0; box-sizing: border-box; }
.hb-page--gift {
    --gold: #C9A84C; --gl: #E8C97A; --gd: #8A6B2A; --gf: rgba(201,168,76,.1);
    --bk: #070707; --d1: #0D0D0D; --d2: #141414; --d3: #1C1C1C;
    --tx: #EDE8DE; --tm: #8A8278; --td: #4A4640;
    --br: rgba(201,168,76,.14); --brh: rgba(201,168,76,.32); --brs: rgba(201,168,76,.55);
}
.hb-page--gift { background: var(--bk); color: var(--tx); font-family: 'Jost',sans-serif; font-weight: 300; min-height: 100vh; overflow-x: hidden; }

.hb-page--gift .wrap { display: grid; grid-template-columns: 64px 1fr 380px; min-height: calc(100vh - 64px); }

.hb-page--gift .rail { border-right: 1px solid var(--br); display: flex; flex-direction: column; align-items: center; padding: 2.5rem 0; position: sticky; top: 64px; height: calc(100vh - 64px); }
.hb-page--gift .ri { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; width: 100%; position: relative; }
.hb-page--gift .ri::before, .hb-page--gift .ri::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 1px; background: var(--br); }
.hb-page--gift .ri::before { top: 0; height: calc(50% - 18px); }
.hb-page--gift .ri::after { bottom: 0; height: calc(50% - 18px); }
.hb-page--gift .ri:first-child::before, .hb-page--gift .ri:last-child::after { display: none; }
.hb-page--gift .rdot { width: 36px; height: 36px; border: 1px solid var(--br); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond',serif; font-size: 14px; color: var(--td); transition: .4s; position: relative; z-index: 1; background: var(--bk); }
.hb-page--gift .ri.active .rdot { border-color: var(--gold); color: var(--gold); background: var(--gf); }
.hb-page--gift .ri.done .rdot { border-color: var(--gd); color: transparent; background: rgba(201,168,76,.06); }
.hb-page--gift .ri.done .rdot::after { content: '✓'; color: var(--gd); font-size: 12px; position: absolute; }

.hb-page--gift .main { padding: 2.5rem; overflow-y: auto; max-height: calc(100vh - 64px); }
.hb-page--gift .pane { display: none; }
.hb-page--gift .pane.on { display: block; animation: gift-fin .35s ease; }
@keyframes gift-fin { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

.hb-page--gift .sh { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--br); }
.hb-page--gift .sh-eye { font-size: 8px; letter-spacing: 5px; text-transform: uppercase; color: var(--gold); margin-bottom: .4rem; }
.hb-page--gift .sh-title { font-family: 'Cormorant Garamond',serif; font-size: clamp(26px,3.5vw,42px); font-weight: 300; line-height: 1.1; margin-bottom: .4rem; }
.hb-page--gift .sh-sub { font-size: 11px; color: var(--tm); line-height: 1.7; }

.hb-page--gift .fchips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1.25rem; }
.hb-page--gift .fc { padding: 5px 14px; border: 1px solid var(--br); color: var(--tm); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: .3s; background: transparent; user-select: none; }
.hb-page--gift .fc:hover { border-color: var(--brh); color: var(--tx); }
.hb-page--gift .fc.on { border-color: var(--gold); color: var(--gold); background: var(--gf); }

.hb-page--gift .fg { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.hb-page--gift .fcard { border: 1px solid var(--br); padding: 1.1rem; cursor: pointer; transition: .3s; position: relative; background: var(--d1); }
.hb-page--gift .fcard:hover { border-color: var(--brh); background: var(--d2); }
.hb-page--gift .fcard.sel { border-color: var(--gold); background: var(--gf); }
.hb-page--gift .fcard.sel::after { content: '✦'; position: absolute; top: .6rem; right: .6rem; color: var(--gold); font-size: 11px; pointer-events: none; }
.hb-page--gift .fmini { height: 128px; display: flex; align-items: center; justify-content: center; margin-bottom: .75rem; pointer-events: none; }
.hb-page--gift .fmini img { width: 100%; height: 100%; object-fit: contain; }
.hb-page--gift .fbrand { font-size: 8px; letter-spacing: 2px; text-transform: uppercase; color: var(--gd); margin-bottom: 2px; }
.hb-page--gift .fname { font-family: 'Cormorant Garamond',serif; font-size: 16px; margin-bottom: 3px; }
.hb-page--gift .ffam { font-size: 8px; color: var(--tm); letter-spacing: .5px; margin-bottom: 6px; }
.hb-page--gift .fprice { font-family: 'Cormorant Garamond',serif; font-size: 17px; color: var(--gold); margin-top: 4px; }
.hb-page--gift .fnotes { font-size: 8px; color: var(--td); margin-top: 3px; }
.hb-page--gift .szrow { display: flex; gap: 6px; margin-top: .5rem; flex-wrap: wrap; }
.hb-page--gift .szb { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--br); color: var(--tm); font-size: 8px; letter-spacing: 1px; cursor: pointer; transition: .3s; background: transparent; }
.hb-page--gift .szb:hover, .hb-page--gift .szb.on { border-color: var(--gold); color: var(--gold); }
.hb-page--gift .szstock { min-width: 17px; min-height: 17px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--brh); color: var(--gold); font-size: 9px; letter-spacing: 0; }

.hb-page--gift .og { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.hb-page--gift .ocard { border: 1px solid var(--br); padding: 1.25rem .875rem; cursor: pointer; transition: .3s; text-align: center; position: relative; background: var(--d1); }
.hb-page--gift .ocard:hover { border-color: var(--brh); background: var(--d2); }
.hb-page--gift .ocard.sel { border-color: var(--gold); background: var(--gf); }
.hb-page--gift .ocard.sel::after { content: '✦'; position: absolute; top: .6rem; right: .6rem; color: var(--gold); font-size: 10px; pointer-events: none; }
.hb-page--gift .ocard.locked { opacity: .28; cursor: not-allowed; }
.hb-page--gift .ovis { height: 90px; display: flex; align-items: center; justify-content: center; margin-bottom: .6rem; pointer-events: none; }
.hb-page--gift .oname { font-family: 'Cormorant Garamond',serif; font-size: 15px; margin-bottom: 3px; }
.hb-page--gift .odesc { font-size: 8px; color: var(--tm); line-height: 1.5; }
.hb-page--gift .oadd { font-size: 8px; color: var(--gold); margin-top: 5px; letter-spacing: .5px; }
.hb-page--gift .obadge { position: absolute; top: .4rem; left: .4rem; padding: 2px 7px; background: rgba(201,168,76,.12); border: 1px solid var(--br); font-size: 6px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }

.hb-page--gift .gcl { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.hb-page--gift .tmplg { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 1.25rem; }
.hb-page--gift .tmpl { border: 1px solid var(--br); height: 72px; cursor: pointer; transition: .3s; overflow: hidden; }
.hb-page--gift .tmpl:hover { border-color: var(--brh); }
.hb-page--gift .tmpl.sel { border-color: var(--gold); }
.hb-page--gift .flabel { font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: var(--td); margin-bottom: 6px; display: block; }
.hb-page--gift .fgroup { margin-bottom: .875rem; }
.hb-page--gift .finput { width: 100%; background: var(--d2); border: 1px solid var(--br); color: var(--tx); font-family: 'Jost',sans-serif; font-size: 12px; font-weight: 300; padding: 9px 13px; outline: none; transition: .3s; display: block; }
.hb-page--gift .finput:focus { border-color: var(--brh); }
.hb-page--gift textarea.finput { resize: none; height: 72px; line-height: 1.6; }
.hb-page--gift .ccount { font-size: 8px; color: var(--td); text-align: right; margin-top: 3px; }
.hb-page--gift .gcprev { border: 1px solid var(--br); padding: 1.5rem; min-height: 180px; position: relative; overflow: hidden; }
.hb-page--gift .delrow { display: flex; flex-direction: column; gap: 6px; margin-top: .875rem; }
.hb-page--gift .dopt { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--br); cursor: pointer; transition: .3s; }
.hb-page--gift .dopt:hover { border-color: var(--brh); }
.hb-page--gift .dopt.sel { border-color: var(--gold); background: var(--gf); }
.hb-page--gift .dradio { width: 14px; height: 14px; border: 1px solid var(--brh); border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.hb-page--gift .dopt.sel .dradio::after { content: ''; width: 7px; height: 7px; background: var(--gold); border-radius: 50%; display: block; }
.hb-page--gift .dlabel { font-size: 11px; letter-spacing: .5px; }
.hb-page--gift .ddesc { font-size: 8px; color: var(--tm); margin-top: 1px; }

.hb-page--gift .snav { display: flex; align-items: center; justify-content: space-between; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--br); }
.hb-page--gift .bprev { padding: 11px 24px; background: transparent; color: var(--tm); border: 1px solid var(--br); font-family: 'Jost',sans-serif; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; transition: .3s; }
.hb-page--gift .bprev:hover { border-color: var(--brh); color: var(--tx); }
.hb-page--gift .bnext { padding: 11px 32px; background: var(--gold); color: var(--bk); font-family: 'Jost',sans-serif; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; border: none; cursor: pointer; transition: .3s; }
.hb-page--gift .bnext:hover { background: var(--gl); }
.hb-page--gift .bnext:disabled { opacity: .28; cursor: not-allowed; pointer-events: none; }
.hb-page--gift .bskip { font-size: 8px; color: var(--td); cursor: pointer; transition: .3s; margin-top: 4px; }
.hb-page--gift .bskip:hover { color: var(--tm); }

.hb-page--gift .ppanel { border-left: 1px solid var(--br); background: var(--d1); display: flex; flex-direction: column; position: sticky; top: 64px; height: calc(100vh - 64px); overflow: hidden; }
.hb-page--gift .pph { padding: 1.25rem 1.75rem; border-bottom: 1px solid var(--br); }
.hb-page--gift .pplabel { font-size: 8px; letter-spacing: 4px; text-transform: uppercase; color: var(--td); margin-bottom: 3px; }
.hb-page--gift .pptotal { font-family: 'Cormorant Garamond',serif; font-size: 26px; color: var(--gold); }
.hb-page--gift .ppvis { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.hb-page--gift .ppstage { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 1rem; position: relative; z-index: 1; }
.hb-page--gift #gift-pp-bottle { width: 100%; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.hb-page--gift #gift-pp-bottle img { width: 100%; height: 100%; object-fit: contain; }
.hb-page--gift .ppsumm { border-top: 1px solid var(--br); padding: 1.25rem 1.75rem; display: flex; flex-direction: column; gap: 7px; }
.hb-page--gift .ppline { display: flex; justify-content: space-between; align-items: center; font-size: 10px; }
.hb-page--gift .pplname { color: var(--tm); }
.hb-page--gift .pplval { font-family: 'Cormorant Garamond',serif; font-size: 13px; color: var(--tx); }
.hb-page--gift .pplval.mt { font-family: 'Jost',sans-serif; font-size: 8px; letter-spacing: 1px; color: var(--td); }
.hb-page--gift .ppcta { padding: 1rem 1.75rem 1.5rem; }
.hb-page--gift .badd { width: 100%; padding: 13px; background: var(--gold); color: var(--bk); border: none; font-family: 'Jost',sans-serif; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; transition: .3s; }
.hb-page--gift .badd:hover:not([disabled]) { background: var(--gl); }
.hb-page--gift .badd[disabled] { opacity: .22; cursor: not-allowed; }

.hb-page--gift .toast { position: fixed; bottom: 1.75rem; right: 1.75rem; background: var(--d2); border: 1px solid var(--brs); padding: .75rem 1.25rem; font-size: 10px; letter-spacing: 1px; z-index: 9999; transform: translateY(70px); opacity: 0; transition: .3s; display: flex; align-items: center; gap: 8px; color: var(--gold); max-width: 280px; }
.hb-page--gift .toast.on { transform: none; opacity: 1; }

.hb-page--gift .success { display: none; position: fixed; inset: 0; background: var(--bk); z-index: 500; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; }
.hb-page--gift .success.on { display: flex; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(201,168,76,.25); } 50% { box-shadow: 0 0 0 18px rgba(201,168,76,0); } }

@media (max-width: 1050px) { .hb-page--gift .wrap { grid-template-columns: 0 1fr 320px; } .hb-page--gift .rail { display: none; } }
@media (max-width: 740px) {
    .hb-page--gift .wrap {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .hb-page--gift .ppanel { display: none; }
    .hb-page--gift .main {
        max-height: none;
        overflow: visible;
        padding: 1.5rem;
    }
    .hb-page--gift .fg,
    .hb-page--gift .og { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hb-page--gift .gcl { grid-template-columns: 1fr; }
    .hb-page--gift .fcard,
    .hb-page--gift .ocard { padding: 1rem; }
    .hb-page--gift .tmplg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hb-page--gift .snav {
        align-items: stretch;
        flex-direction: column;
        gap: .75rem;
    }
    .hb-page--gift .bprev,
    .hb-page--gift .bnext {
        width: 100%;
        min-height: 46px;
    }
    .hb-page--gift .toast {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        justify-content: center;
        max-width: none;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hb-page--gift .main { padding: 1rem; }
    .hb-page--gift .sh {
        margin-bottom: 1.25rem;
        padding-bottom: 1rem;
    }
    .hb-page--gift .sh-eye { letter-spacing: 3px; }
    .hb-page--gift .sh-title {
        font-size: clamp(28px, 10vw, 36px);
        line-height: 1.05;
    }
    .hb-page--gift .fchips {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-inline: -1rem;
        padding: 0 1rem .5rem;
        -webkit-overflow-scrolling: touch;
    }
    .hb-page--gift .fc {
        flex: 0 0 auto;
        min-height: 36px;
        white-space: nowrap;
    }
    .hb-page--gift .fg,
    .hb-page--gift .og,
    .hb-page--gift .tmplg { grid-template-columns: 1fr; }
    .hb-page--gift .fmini,
    .hb-page--gift .ovis { height: 118px; }
    .hb-page--gift .gcprev { min-height: 150px; }
}