/* Zostav si darčekový box – builder s vizuálnym náhľadom */
.gb { --gb-rose:#c8325b; --gb-rose-d:#a3234a; --gb-cream:#fff7f0; --gb-ink:#2b1d22; --gb-gold:#c9a24b; }
.gb-wrap { background:linear-gradient(135deg,#fff7f0 0%,#ffeef2 100%); border-radius:28px; padding:36px; box-shadow:0 20px 60px rgba(200,50,91,.12); }
.gb-head { text-align:center; max-width:640px; margin:0 auto 28px; }
.gb-head h2 { font-family:'Playfair Display',serif; font-size:clamp(26px,4vw,38px); margin:6px 0 8px; color:var(--gb-ink); }
.gb-head p { margin:0; color:#6b5a60; }
.gb-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:start; }

/* výber produktov */
.gb-pick h3, .gb-side h3 { margin:0 0 12px; font-size:16px; color:var(--gb-ink); }
.gb-products { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; max-height:520px; overflow:auto; padding:4px; }
.gb-prod { position:relative; background:#fff; border:2px solid transparent; border-radius:16px; padding:10px; text-align:left; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.06); transition:transform .18s,border-color .18s,box-shadow .18s; font:inherit; color:inherit; }
.gb-prod:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(200,50,91,.18); }
.gb-prod:focus-visible { outline:3px solid var(--gb-rose); outline-offset:2px; }
.gb-prod.is-in { border-color:var(--gb-rose); }
.gb-prod img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; display:block; background:#f4e9e4; }
.gb-prod-name { display:block; font-size:13px; font-weight:600; margin:8px 0 2px; line-height:1.25; min-height:32px; }
.gb-prod-price { font-size:13px; color:var(--gb-rose-d); font-weight:700; }
.gb-prod-badge { position:absolute; top:6px; right:6px; min-width:24px; height:24px; padding:0 7px; border-radius:12px; background:var(--gb-rose); color:#fff; font-size:13px; font-weight:700; display:none; align-items:center; justify-content:center; }
.gb-prod.is-in .gb-prod-badge { display:flex; }

/* krabica */
.gb-side { position:sticky; top:90px; }
.gb-box { position:relative; margin:0 auto 16px; max-width:380px; }
.gb-lid { position:relative; z-index:2; background:linear-gradient(160deg,var(--gb-rose),var(--gb-rose-d)); border-radius:14px 14px 4px 4px; padding:16px 14px 12px; text-align:center; color:#fff; box-shadow:0 8px 20px rgba(163,35,74,.3); transition:transform .45s cubic-bezier(.3,1.4,.5,1); transform-origin:left bottom; }
.gb-box.is-open .gb-lid { transform:translateY(-6px) rotate(-3deg); }
.gb-lid::before { content:""; position:absolute; left:50%; top:0; bottom:0; width:26px; margin-left:-13px; background:rgba(255,255,255,.22); }
.gb-ribbon-bow { position:absolute; left:50%; top:-16px; transform:translateX(-50%); font-size:34px; line-height:1; z-index:3; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.gb-lid-label { position:relative; z-index:1; display:inline-block; background:#fff; color:var(--gb-ink); border-radius:8px; padding:6px 14px; font-family:'Playfair Display',serif; font-size:15px; max-width:90%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.gb-lid-label.is-empty { opacity:.75; font-style:italic; }
.gb-tray { position:relative; z-index:1; background:linear-gradient(180deg,#f3d9c4,#e8c4a8); border:3px solid var(--gb-rose-d); border-top:0; border-radius:0 0 18px 18px; min-height:190px; padding:18px 12px 14px; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-content:flex-start; box-shadow:inset 0 10px 18px rgba(0,0,0,.12); }
.gb-tray::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(45deg,transparent 0 10px,rgba(255,255,255,.18) 10px 20px); border-radius:inherit; pointer-events:none; }
.gb-empty { position:relative; width:100%; align-self:center; text-align:center; color:#8a6a5a; font-size:14px; padding:30px 10px; }
.gb-item { position:relative; width:72px; animation:gbDrop .5s cubic-bezier(.3,1.5,.5,1) both; }
.gb-item img { width:72px; height:72px; object-fit:cover; border-radius:12px; border:3px solid #fff; box-shadow:0 5px 12px rgba(0,0,0,.25); display:block; background:#fff; }
.gb-item-q { position:absolute; top:-6px; left:-6px; min-width:22px; height:22px; border-radius:11px; background:var(--gb-ink); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 5px; }
.gb-item-x { position:absolute; top:-8px; right:-8px; width:24px; height:24px; border-radius:50%; border:0; background:#fff; color:var(--gb-rose-d); font-size:16px; line-height:1; font-weight:700; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.3); }
.gb-card-note { position:relative; width:100%; margin-top:6px; background:#fffdf8; border:1px dashed var(--gb-gold); border-radius:8px; padding:8px 12px; font-family:'Playfair Display',serif; font-style:italic; font-size:14px; color:var(--gb-ink); text-align:center; transform:rotate(-1.2deg); box-shadow:0 3px 8px rgba(0,0,0,.12); word-break:break-word; }
.gb-card-note small { display:block; font-family:'Source Sans 3',sans-serif; font-style:normal; font-size:11px; color:var(--gb-gold); text-transform:uppercase; letter-spacing:.08em; margin-bottom:2px; }
@keyframes gbDrop { from { opacity:0; transform:translateY(-40px) scale(.7) rotate(-8deg); } to { opacity:1; transform:none; } }

/* personalizácia */
.gb-pers { background:#fff; border-radius:16px; padding:14px; margin-bottom:14px; box-shadow:0 4px 14px rgba(0,0,0,.05); }
.gb-pers label { display:block; font-size:13px; font-weight:600; margin:0 0 4px; color:var(--gb-ink); }
.gb-pers input, .gb-pers textarea { width:100%; box-sizing:border-box; border:1px solid #e6d3d3; border-radius:10px; padding:9px 11px; font:inherit; font-size:15px; margin-bottom:10px; background:#fffdfc; }
.gb-pers input:focus, .gb-pers textarea:focus { outline:2px solid var(--gb-rose); border-color:transparent; }
.gb-pers textarea { resize:vertical; min-height:60px; }
.gb-pers-count { float:right; font-weight:400; color:#9a8a8f; }
.gb-colors { display:flex; gap:8px; margin-bottom:2px; }
.gb-color { width:30px; height:30px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1px #d9c6c6; cursor:pointer; padding:0; }
.gb-color[aria-pressed="true"] { box-shadow:0 0 0 3px var(--gb-ink); }

/* súhrn */
.gb-total { display:flex; justify-content:space-between; align-items:baseline; margin:8px 0 4px; font-size:15px; }
.gb-total strong { font-size:24px; color:var(--gb-rose-d); }
.gb-fine { margin:0 0 12px; font-size:12.5px; color:#8a7a80; }
.gb-actions { display:flex; gap:10px; }
.gb-btn { flex:1; border:0; border-radius:999px; padding:13px 18px; font:inherit; font-weight:700; cursor:pointer; background:var(--gb-rose); color:#fff; transition:background .2s,transform .15s; }
.gb-btn:hover:not([disabled]) { background:var(--gb-rose-d); transform:translateY(-1px); }
.gb-btn[disabled] { background:#d8c7cb; cursor:not-allowed; }
.gb-btn.ghost { flex:0 0 auto; background:transparent; color:var(--gb-rose-d); box-shadow:inset 0 0 0 2px var(--gb-rose); }
.gb-btn.ghost:hover:not([disabled]) { background:#ffe9ef; }
.gb-btn.ghost[disabled] { box-shadow:inset 0 0 0 2px #d8c7cb; color:#b9a9ad; }
/* kroky, príležitosť, doprava zadarmo */
.gb-steps { list-style:none; display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:16px 0 0; padding:0; font-size:14px; font-weight:600; }
.gb-steps li { padding:6px 14px; border-radius:999px; background:#f5e7de; color:#5c4f4c; }
.gb-steps li.is-done { background:#2f5f50; color:#fff; }
.gb-occasions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.gb-occ { min-height:44px; padding:0 16px; border-radius:999px; border:1px solid #e6c9c4; background:#fff; color:var(--gb-ink); font:inherit; font-size:15px; font-weight:600; cursor:pointer; }
.gb-occ:hover { border-color:var(--gb-rose); }
.gb-occ:focus-visible { outline:3px solid var(--gb-rose); outline-offset:2px; }
.gb-occ[aria-pressed="true"] { background:var(--gb-ink); border-color:var(--gb-ink); color:#fff; }
.gb-ship { margin:6px 0 10px; font-size:14px; font-weight:600; color:#2f5f50; }
.gb-ship-track { height:8px; border-radius:999px; background:#f5e7de; overflow:hidden; margin-bottom:6px; }
.gb-ship-bar { height:100%; width:0; border-radius:999px; background:#2f6f5e; transition:width .3s ease; }
.gb-status { min-height:20px; margin:8px 0 0; font-size:14px; color:#2e7d4f; font-weight:600; text-align:center; }

@media (max-width:860px) {
  .gb-wrap { padding:22px 16px; border-radius:20px; }
  .gb-grid { grid-template-columns:1fr; }
  .gb-side { position:static; }
  .gb-products { max-height:380px; }
}
@media (prefers-reduced-motion:reduce) {
  .gb-item, .gb-lid { animation:none; transition:none; }
}