/* ============================================================
   MALI HEROJ — order builder / checkout (dark "console")
   loads after styles.css, reuses its tokens
   ============================================================ */

/* ---- shop paused (on/off iz admin dashboarda) ---- */
.shop-paused-banner {
  display: flex; align-items: center; gap: 16px;
  max-width: 1140px; margin: 0 auto 26px;
  padding: 16px 22px; border-radius: 16px;
  background:
    radial-gradient(120% 90% at 10% 0%, rgba(244,213,138,.16), transparent 60%),
    linear-gradient(160deg, var(--navy-800), var(--navy-950));
  border: 1px solid rgba(244,213,138,.4);
  box-shadow: 0 22px 44px -26px rgba(6,11,30,.8);
  font-size: 15px; line-height: 1.55; color: rgba(252,248,238,.88);
}
.shop-paused-banner b { color: var(--cream-50); }
.shop-paused-banner a { color: var(--gold-300); font-weight: 800; text-decoration: underline; }
.spb-ic {
  flex-shrink: 0; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 12px; font-size: 20px;
  background: radial-gradient(circle at 50% 30%, var(--gold-300), var(--gold-500));
  color: var(--navy-900);
  box-shadow: 0 0 0 5px rgba(6,11,30,.4), 0 10px 24px -10px rgba(239,195,104,.7);
}
.shop-paused-cta {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px; border-radius: 14px; text-align: center;
  background: rgba(244,213,138,.08);
  border: 1px dashed rgba(244,213,138,.45);
}
.shop-paused-cta b { font-size: 16px; }
.shop-paused-cta span { font-size: 14px; color: rgba(252,248,238,.75); line-height: 1.5; }
.shop-paused-cta small { font-size: 13px; color: var(--gold-300); letter-spacing: .02em; }

/* ---- checkout API error ---- */
.pay-error {
  margin-top: 12px; padding: 12px 16px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.5; color: #FFD9CF;
  background: rgba(214,69,40,.14); border: 1px solid rgba(214,69,40,.45);
}

/* ---- addon badge ("Najčešće birani dodatak") ---- */
.addon { position: relative; }
.addon-badge {
  display: inline-block; margin-left: 10px; vertical-align: 2px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color: var(--navy-900); white-space: nowrap;
  box-shadow: 0 6px 14px -6px rgba(239,195,104,.8);
}

.builder-page {
  min-height: 100vh;
  background:
    radial-gradient(70% 50% at 85% -5%, rgba(255,138,76,.1), transparent 55%),
    radial-gradient(60% 40% at 5% 100%, rgba(31,190,196,.08), transparent 55%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900));
  color: var(--cream-50);
}
.builder-page::before {
  content: "";
  position: fixed; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1.5px);
  background-size: 7px 7px;
  pointer-events: none; z-index: 0;
}

/* header */
.bld-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(8,9,13,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--navy-700);
}
.bld-header-in {
  max-width: 1180px; margin: 0 auto; padding: 15px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.bld-header .brand-name { color: var(--cream-50); }
.bld-header .brand-name b { color: var(--gold-400); }
.bld-header .brand-mark { width: 34px; height: 34px; font-size: 14px; }
.bld-back {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: rgba(243,241,235,.7); font-weight: 700; font-size: 12.5px;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 9px 16px; border-radius: 3px; border: 1px solid var(--navy-600);
  transition: background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.bld-back:hover { background: var(--navy-800); color: var(--cream-50); border-color: var(--gold-500); }

/* shell */
.bld-shell { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 46px 32px 90px; }
.bld-intro { max-width: 660px; margin-bottom: 40px; }
.bld-intro .eyebrow { color: var(--gold-400); }
.bld-intro h1 {
  font-family: var(--serif); font-weight: 600; text-transform: uppercase;
  font-size: clamp(36px, 4.6vw, 58px); line-height: 0.98; margin: 16px 0 14px;
  color: var(--cream-50); letter-spacing: -0.005em;
}
.bld-intro p { font-size: 18px; line-height: 1.6; color: rgba(243,241,235,.74); }

.bld-grid { display: grid; grid-template-columns: 1fr 384px; gap: 36px; align-items: start; }
.bld-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

/* form section card */
.fld {
  background: linear-gradient(168deg, var(--navy-800), var(--navy-850));
  border: 1px solid var(--navy-600);
  border-radius: var(--radius);
  padding: 30px 30px 32px;
  box-shadow: var(--shadow-soft);
}
.fld-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.fld-num {
  flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 3px;
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700; font-size: 20px;
  color: #160B04;
  background: linear-gradient(160deg, var(--gold-400), var(--gold-600));
  box-shadow: 0 6px 14px -6px rgba(242,100,30,.8);
  clip-path: polygon(0 0, 100% 0, 100% 74%, 76% 100%, 0 100%);
}
.fld-head h2 { font-family: var(--serif); font-size: 25px; font-weight: 600; text-transform: uppercase; color: var(--cream-50); }
.fld-head .opt { margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--ink-faint); text-transform: uppercase; }

/* package options */
.pack-list { display: flex; flex-direction: column; gap: 12px; }
.pack {
  width: 100%; color: inherit; font-family: var(--sans); text-align: left;
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 16px;
  padding: 18px 20px;
  border: 1.5px solid var(--navy-600); border-radius: var(--radius);
  cursor: pointer; background: rgba(8,9,13,.4);
  transition: border-color .2s, box-shadow .2s, background .2s, transform .15s;
}
.pack:hover { border-color: rgba(255,138,76,.5); background: rgba(8,9,13,.6); }
.pack:focus-visible, .chip:focus-visible, .hpick:focus-visible { outline: 3px solid rgba(244,213,138,.45); outline-offset: 3px; }
.pack.sel { border-color: var(--gold-500); background: rgba(255,138,76,.08); box-shadow: 0 0 0 3px rgba(242,100,30,.18); }
.radio {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--navy-600); display: grid; place-items: center;
  transition: border-color .2s;
}
.pack.sel .radio { border-color: var(--gold-500); }
.pack.sel .radio::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--gold-500); }
.pack-info .pn { font-family: var(--serif); font-size: 20px; font-weight: 600; text-transform: uppercase; color: var(--cream-50); }
.pack-info .pd { font-size: 13px; color: rgba(243,241,235,.6); margin-top: 3px; line-height: 1.4; }
.pack-price { font-family: var(--serif); font-size: 32px; font-weight: 700; color: var(--cream-50); white-space: nowrap; }
.pack-price small { font-size: 15px; color: var(--gold-400); }
.pack-tag {
  display: inline-block; margin-left: 10px; vertical-align: middle;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 2px; background: var(--blush); color: var(--navy-950);
}

/* paket / dodatak — nedostupno kad su fizičke narudžbe pauzirane */
.pack.pack-unavail { opacity: .5; cursor: not-allowed; }
.pack.pack-unavail:hover { border-color: var(--navy-600); background: rgba(8,9,13,.45); box-shadow: none; }
.pack-soon {
  display: inline-block; margin-left: 10px; vertical-align: middle;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: rgba(143,184,255,.16); color: #aecbff; border: 1px solid rgba(143,184,255,.4);
}
.pack-soon-note { font-size: 12px; color: #aecbff; margin-top: 6px; line-height: 1.45; }
.addon.unavail { opacity: .5; cursor: not-allowed; }
.addon.unavail:hover { border-color: var(--navy-600); background: rgba(8,9,13,.3); box-shadow: none; }
.addon .ap.soon {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #aecbff; border-radius: 999px;
}
.hero-note {
  display: block; margin: -2px 0 14px; padding: 12px 15px;
  font-size: 13px; line-height: 1.5; color: rgba(243,241,235,.78);
  background: rgba(255,138,76,.08); border: 1px solid rgba(255,138,76,.3); border-radius: var(--radius);
}
.hero-note b { color: var(--gold-300); font-weight: 700; }
.hero-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hpick {
  position: relative;
  text-align: left;
  padding: 0; border-radius: var(--radius); cursor: pointer; overflow: hidden;
  border: 1.5px solid var(--navy-600); background: rgba(8,9,13,.4);
  transition: border-color .2s, box-shadow .2s, transform .15s, background .2s;
}
.hpick:hover { border-color: rgba(255,138,76,.5); transform: translateY(-3px); box-shadow: 0 18px 36px -20px rgba(0,0,0,.7); }
.hpick.sel { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(242,100,30,.2); }
.hp-scene { position: relative; width: 100%; aspect-ratio: 220 / 150; overflow: hidden; background: #06070b; }
/* cinematic grain + horizon fade + film letterbox bars */
.hp-scene::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(180deg, #040406 0 5px, transparent 5px),
    linear-gradient(0deg, #040406 0 5px, transparent 5px),
    linear-gradient(180deg, rgba(4,4,8,.5), transparent 24%, transparent 60%, rgba(4,4,8,.8)),
    radial-gradient(130% 90% at 50% 36%, transparent 52%, rgba(4,5,10,.5)),
    repeating-linear-gradient(0deg, rgba(0,0,0,.13) 0 1px, transparent 1px 3px),
    radial-gradient(rgba(255,255,255,.04) 0.6px, transparent 1.1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 3px 3px;
}
.hs-svg { display: block; width: 100%; height: 100%; transition: transform .5s cubic-bezier(.2,.7,.2,1); transform: scale(1.02); }
.hpick:hover .hs-svg { transform: scale(1.07); }
.hp-body { padding: 12px 14px 14px; }
.hpick .hn { font-family: var(--serif); font-size: 17px; font-weight: 600; text-transform: uppercase; color: var(--cream-50); line-height: 1.1; }
.hpick .ht { font-size: 12px; color: rgba(243,241,235,.6); margin-top: 5px; line-height: 1.4; }
.hpick .tick {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 24px; height: 24px; border-radius: 3px;
  background: var(--gold-500); color: #160B04;
  display: grid; place-items: center; font-size: 14px; font-weight: 900;
  opacity: 0; transform: scale(.6); transition: .2s;
  box-shadow: 0 4px 10px -2px rgba(0,0,0,.5);
}
.hpick.sel .tick { opacity: 1; transform: scale(1); }

/* generic inputs */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 12.5px; font-weight: 800; color: var(--cream-50); letter-spacing: .04em; text-transform: uppercase; }
.field label .req { color: var(--gold-400); }
.input, .select, .textarea {
  font-family: var(--sans); font-size: 15.5px; color: var(--cream-50);
  padding: 13px 15px; border-radius: 3px;
  border: 1.5px solid var(--navy-600); background: rgba(8,9,13,.55);
  transition: border-color .2s, box-shadow .2s, background .2s;
  width: 100%;
}
.input::placeholder, .textarea::placeholder { color: rgba(243,241,235,.38); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--gold-500); background: rgba(8,9,13,.75);
  box-shadow: 0 0 0 3px rgba(242,100,30,.18);
}
.select { color: var(--cream-50); }
.select option { background: var(--navy-850); color: var(--cream-50); }
.textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.hint { font-size: 12.5px; color: var(--ink-faint); }

/* locked field (posveta unlocks with Hero Story / Hero Legend) */
.locked-note { display: flex; align-items: flex-start; gap: 9px; padding: 13px 15px; border: 1px dashed var(--navy-600); border-radius: 10px; background: rgba(8,9,13,.3); font-size: 13.5px; line-height: 1.5; color: rgba(243,241,235,.62); }
.locked-note .lk-ic { flex-shrink: 0; color: var(--gold-400); font-family: var(--mono); font-weight: 700; }
.locked-note b { color: var(--cream-50); font-weight: 700; }

/* color chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-family: var(--sans);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px 9px 10px; border-radius: 3px; cursor: pointer;
  border: 1.5px solid var(--navy-600); background: rgba(8,9,13,.4);
  font-size: 13.5px; font-weight: 700; color: var(--cream-50);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.chip:hover { border-color: rgba(255,138,76,.5); }
.chip.sel { border-color: var(--gold-500); background: rgba(255,138,76,.08); box-shadow: 0 0 0 3px rgba(242,100,30,.16); }
.chip .sw { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.chip.txt { padding: 9px 15px; }
.chip.txt.sel::before { content: "✓"; color: var(--gold-400); font-size: 12px; margin-right: -2px; }

/* add-ons */
.addon-group { margin-bottom: 22px; }
.addon-group:last-child { margin-bottom: 0; }
.addon-group-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--navy-700); flex-wrap: wrap; }
.agh-ic { font-size: 14px; }
.agh-ic.digitalni { color: var(--gold-300); }
.agh-ic.fizicki { color: #8fb8ff; }
.agh-label { font-family: var(--mono); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-50); }
.agh-note { font-size: 12px; color: rgba(243,241,235,.5); }
.addons { display: flex; flex-direction: column; gap: 11px; }
.addon {
  display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 14px;
  padding: 15px 18px; border-radius: var(--radius); cursor: pointer;
  border: 1.5px solid var(--navy-600); background: rgba(8,9,13,.4);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.addon:hover { border-color: rgba(255,138,76,.5); background: rgba(8,9,13,.6); }
.addon.sel { border-color: var(--gold-500); background: rgba(255,138,76,.08); box-shadow: 0 0 0 3px rgba(242,100,30,.16); }
.check {
  width: 22px; height: 22px; border-radius: 3px;
  border: 2px solid var(--navy-600); display: grid; place-items: center;
  color: #160B04; font-size: 13px; font-weight: 900; transition: .2s;
}
.addon.sel .check { background: var(--gold-500); border-color: var(--gold-500); }
/* min-width:0 + overflow-wrap:anywhere = kartica se NE moze prosiriti izvan ekrana,
   bez obzira na duljinu naziva, opisa ili oznake. */
.addon-text { min-width: 0; }
.addon .an { font-size: 15px; font-weight: 700; color: var(--cream-50); overflow-wrap: anywhere; }
.addon .ad { font-size: 12.5px; color: rgba(243,241,235,.58); margin-top: 2px; overflow-wrap: anywhere; }
.addon .ap { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--gold-400); white-space: nowrap; }

/* add-on already included in the chosen package → not selectable */
.addon.incl { cursor: default; opacity: .55; background: rgba(8,9,13,.3); }
.addon.incl:hover { border-color: var(--navy-600); background: rgba(8,9,13,.3); box-shadow: none; }
.addon.incl .check { background: var(--gold-500); border-color: var(--gold-500); }
.addon .ap.inc {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold-300);
  background: rgba(255,138,76,.16); padding: 5px 10px; border-radius: 2px;
}

/* photo dropzone */
.drop {
  position: relative;
  border: 2px dashed var(--navy-600); border-radius: var(--radius);
  background: rgba(8,9,13,.4);
  padding: 30px; text-align: center; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.drop:hover, .drop.drag { border-color: var(--gold-500); background: rgba(8,9,13,.6); }
.drop.full { cursor: default; border-style: solid; border-color: var(--navy-600); background: rgba(8,9,13,.3); }
.drop.full:hover { border-color: var(--navy-600); background: rgba(8,9,13,.3); }
.drop input[type=file] { display: none; }

/* multi-photo uploader */
.upload { display: flex; flex-direction: column; gap: 14px; }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.thumb {
  position: relative; aspect-ratio: 1 / 1; border-radius: 3px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,138,76,.5);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.empty {
  display: grid; place-items: center; color: var(--navy-600); font-size: 26px; font-weight: 300;
  box-shadow: none; border: 2px dashed var(--navy-600); background: rgba(8,9,13,.3);
}
.thumb-rm {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 3px;
  border: none; cursor: pointer; background: rgba(8,9,13,.82); color: #fff;
  font-size: 16px; line-height: 1; display: grid; place-items: center;
}
.thumb-rm:hover { background: var(--gold-600); }
.upload-count { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); font-weight: 700; letter-spacing: .04em; }

/* extra member section */
.member-fld { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(242,100,30,.1); }
.member-note { font-size: 13.5px; color: rgba(243,241,235,.7); margin: -4px 0 16px; line-height: 1.5; }
.member-note b { color: var(--cream-50); }

/* photos-after-payment note */
.photo-after-box {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px;
  border: 1px dashed var(--navy-600); border-radius: var(--radius);
  background: rgba(8,9,13,.4);
}
.pa-ico {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 3px;
  display: grid; place-items: center; font-size: 20px; font-weight: 800; color: var(--gold-400);
  background: rgba(255,138,76,.08); border: 1px solid var(--navy-600);
}
.pa-tx { display: flex; flex-direction: column; gap: 5px; }
.pa-tx b { color: var(--cream-50); font-size: 15px; line-height: 1.4; }
.pa-tx span { font-size: 13.5px; color: rgba(243,241,235,.68); line-height: 1.55; }
.pa-tx span b { display: inline; color: var(--gold-300); }

.secure-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; line-height: 1.5; color: rgba(243,241,235,.6); }
.secure-note .ic { flex-shrink: 0; color: var(--gold-400); font-family: var(--mono); font-weight: 700; }
.drop-ico {
  width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 3px;
  display: grid; place-items: center; font-size: 22px; color: var(--gold-400);
  background: rgba(255,138,76,.08);
  border: 1px solid var(--navy-600);
}
.drop-t { font-weight: 800; color: var(--cream-50); font-size: 15.5px; }
.drop-s { font-size: 13px; color: rgba(243,241,235,.6); margin-top: 5px; }

/* in-checkout photo upload blocks */
.up-block { margin-top: 14px; }
.up-block:first-of-type { margin-top: 0; }
.up-label { font-size: 12.5px; font-weight: 800; color: var(--cream-50); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 9px; }
.drop-tx b { display: block; font-weight: 800; color: var(--cream-50); font-size: 15.5px; }
.drop-tx span { display: block; font-size: 13px; color: rgba(243,241,235,.6); margin-top: 5px; }
.up-block .thumbs { margin-top: 12px; }
.up-count { font-size: 11.5px; color: var(--ink-faint); font-weight: 700; letter-spacing: .02em; margin-top: 9px; }

/* photo do / don't guidelines */
.photo-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.pg-col { padding: 15px 16px 16px; border-radius: 12px; border: 1px solid var(--navy-700); background: rgba(8,9,13,.3); }
.pg-head { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--cream-50); margin-bottom: 12px; }
.pg-ic { width: 21px; height: 21px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.pg-do .pg-ic { background: rgba(63,168,92,.18); color: #76d693; box-shadow: inset 0 0 0 1px rgba(63,168,92,.55); }
.pg-dont .pg-ic { background: rgba(216,68,46,.16); color: #f2937f; box-shadow: inset 0 0 0 1px rgba(216,68,46,.5); }
.pg-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pg-col li { position: relative; padding-left: 17px; font-size: 13px; line-height: 1.45; color: rgba(243,241,235,.78); }
.pg-col li::before { content: "›"; position: absolute; left: 0; top: 0; color: var(--gold-400); font-family: var(--mono); font-weight: 700; }
@media (max-width: 560px) { .photo-guide { grid-template-columns: 1fr; } }
.drop-pick { color: var(--gold-400); text-decoration: underline; }
.preview { display: flex; align-items: center; gap: 16px; text-align: left; }
.preview img { width: 78px; height: 78px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,138,76,.5); }
.preview .pv-name { font-weight: 800; color: var(--cream-50); font-size: 15px; }
.preview .pv-sub { font-size: 13px; color: rgba(243,241,235,.6); margin-top: 2px; }
.preview .pv-rm { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--ink-faint); font-weight: 800; font-size: 13px; }
.preview .pv-rm:hover { color: var(--gold-400); }

/* photo note (upload happens after payment) */
.photo-note {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px; border-radius: var(--radius);
  background: rgba(8,9,13,.4); border: 1px solid var(--navy-600);
}
.photo-note .pn-ico {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 3px;
  display: grid; place-items: center; font-size: 16px; color: var(--gold-400);
  background: rgba(255,138,76,.08); border: 1px solid var(--navy-600);
}
.photo-note b { font-size: 15px; color: var(--cream-50); font-weight: 800; }

/* ============================================================
   SUMMARY (sticky)
   ============================================================ */
.summary-wrap { position: sticky; top: 90px; }
.summary {
  position: relative; overflow: hidden;
  border-radius: var(--radius); color: var(--cream-50);
  background: linear-gradient(165deg, var(--navy-800), var(--navy-950));
  border: 1px solid var(--navy-600);
  box-shadow: var(--shadow-card);
  padding: 28px 26px;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.summary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 50% at 85% 0%, rgba(255,138,76,.12), transparent 60%);
}
.summary > * { position: relative; z-index: 1; }
.summary h3 {
  font-family: var(--serif); font-size: 23px; font-weight: 600; text-transform: uppercase; color: var(--cream-50);
  display: flex; align-items: center; gap: 9px; margin-bottom: 20px;
}
.summary h3 .s { color: var(--gold-400); }
.sum-row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--navy-700); }
.sum-row .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: rgba(243,241,235,.55); }
.sum-row .v { font-size: 14.5px; font-weight: 700; color: var(--cream-50); text-align: right; }
.sum-row .v.muted { color: rgba(243,241,235,.4); font-weight: 600; font-style: italic; }
.sum-row .v em { font-family: var(--serif); font-style: normal; text-transform: uppercase; color: var(--gold-400); font-weight: 600; font-size: 16px; }
/* .summary ima overflow:hidden — bez ovoga bi se preduga stavka odrezala umjesto prelomila. */
.sum-addon { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: rgba(243,241,235,.78); padding: 5px 0; }
.sum-addon span:first-child { min-width: 0; overflow-wrap: anywhere; }
.sum-addon span:last-child { color: var(--gold-400); font-weight: 700; flex-shrink: 0; white-space: nowrap; }

/* Dodatna cijena (NN 101/26) na tamnoj podlozi narudžbe: ista sitna oznaka kao na naslovnici
   (.anchor-price u styles.css), samo svijetla. Pojedinačno po mjestu jer builder.css učitava i
   svijetla pravno.html. */
.pack-price .anchor-price,
.addon .ap .anchor-price,
.agh-note .anchor-price,
.summary .sum-addon .anchor-price,
.sum-nudge .anchor-price { color: rgba(243,241,235,.6); }
.pack-price .anchor-price { margin-top: 4px; }
/* iznos i oznaka ispod njega poravnati desno, kao stupac cijena */
.addon .ap { text-align: right; }
.addon .ap .anchor-price { margin-top: 3px; }
.summary .sum-addon > span:last-child { text-align: right; }
.summary .sum-addon .anchor-price { margin-top: 1px; }
.sum-nudge .sn-anchor { grid-column: 2; margin-top: -3px; }

/* Legend nudge — upsell kad se dodaci približe cijeni Legenda */
.sum-nudge {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 12px;
  width: 100%; margin: 12px 0 2px; padding: 13px 15px; text-align: left; cursor: pointer;
  font-family: var(--sans); font-size: 13px; line-height: 1.5; color: rgba(243,241,235,.85);
  background: rgba(255,138,76,.08); border: 1px solid rgba(255,138,76,.38); border-radius: var(--radius);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.sum-nudge:hover { border-color: var(--gold-500); background: rgba(255,138,76,.13); box-shadow: 0 0 0 3px rgba(242,100,30,.16); }
.sum-nudge .sn-star { color: var(--gold-400); font-size: 16px; }
.sum-nudge .sn-tx b { color: var(--gold-300); }
.sum-nudge .sn-go {
  grid-column: 2; justify-self: start;
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-300); text-decoration: underline; text-underline-offset: 3px;
}

/* early heroes naznaka na pack kartici */
.pack-early {
  margin-top: 6px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--gold-300);
}
.sum-total { display: flex; align-items: baseline; justify-content: space-between; margin: 18px 0 6px; }
.sum-total .tl { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: rgba(243,241,235,.8); }
.sum-total .tv { font-family: var(--serif); font-size: 44px; font-weight: 700; color: var(--cream-50); }
.sum-total .tv small { font-size: 22px; color: var(--gold-400); }
.summary .btn { width: 100%; justify-content: center; margin-top: 16px; font-size: 15px; padding: 17px; }
.summary .btn[disabled] { opacity: .42; cursor: not-allowed; filter: grayscale(.3); }

/* consent gate (GDPR + terms) */
.sum-consent { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--navy-600); }
.consent { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.consent .cbox {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 4px; margin-top: 1px;
  display: grid; place-items: center; font-size: 13px; font-weight: 900; line-height: 1;
  color: transparent; background: rgba(8,9,13,.5); border: 1.5px solid var(--navy-600);
  transition: background .15s, border-color .15s, color .15s;
}
.consent:hover .cbox { border-color: var(--gold-500); }
.consent input:checked + .cbox { background: linear-gradient(160deg, var(--gold-400), var(--gold-600)); border-color: var(--gold-500); color: #160B04; }
.consent input:focus-visible + .cbox { box-shadow: 0 0 0 3px rgba(242,100,30,.3); }
.consent .ctx { font-size: 12.5px; line-height: 1.5; color: rgba(243,241,235,.74); }
.consent .ctx a { color: var(--gold-400); font-weight: 700; }
.consent .ctx b { color: var(--cream-50); font-weight: 700; }

/* optional opt-in (Registar heroja) — odvojen od obaveznih privola */
.consent-opt { margin-top: 12px; padding: 12px 14px; background: rgba(255,138,76,.06); border: 1px solid rgba(255,138,76,.28); border-radius: 10px; }
.consent-opt .ctx { color: rgba(243,241,235,.82); }

.sum-need { font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em; color: var(--gold-300); text-align: center; margin-top: 11px; min-height: 16px; }
.sum-secure { margin-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.sum-secure div { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: rgba(243,241,235,.66); }
.sum-secure .ic { color: var(--gold-400); font-family: var(--mono); font-size: 12px; font-weight: 700; }
.sum-secure b { color: var(--gold-300); font-weight: 700; }
.sum-after {
  margin-top: 16px; padding: 13px 15px; border-radius: 3px;
  background: rgba(255,138,76,.07); border: 1px solid var(--navy-600);
  font-size: 12.5px; line-height: 1.5; color: rgba(243,241,235,.72);
}
.sum-after b { color: var(--gold-300); font-weight: 700; }

/* extra optional personalization block */
.extra-toggle { margin-top: 22px; padding: 20px; border: 1px solid var(--navy-700); border-radius: 14px; background: linear-gradient(180deg, rgba(255,138,76,.05), rgba(8,9,13,.2)); }
.extra-toggle .ex-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.extra-toggle .ex-spark { flex-shrink: 0; font-size: 18px; color: var(--gold-400); margin-top: 2px; }
.extra-toggle .ex-head b { display: block; font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--cream-50); margin-bottom: 3px; }
.extra-toggle .ex-sub { display: block; font-size: 13px; line-height: 1.5; color: rgba(243,241,235,.62); }
.extra-toggle .ex-sub i { color: var(--gold-300); font-style: italic; }

/* describe-your-hero */
.dream-field { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--navy-700); display: flex; flex-direction: column; gap: 7px; }
.dream-field label { font-size: 12.5px; font-weight: 800; color: var(--cream-50); text-transform: uppercase; letter-spacing: .04em; }
.dream-field .hint b { color: var(--gold-400); font-weight: 800; }

/* gift option */
.gift-block { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--navy-700); }
.gift-toggle {
  display: flex; align-items: center; gap: 13px; cursor: pointer;
  padding: 15px 18px; border-radius: var(--radius);
  border: 1.5px solid var(--navy-600); background: rgba(8,9,13,.4);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.gift-toggle:hover { border-color: rgba(255,138,76,.5); background: rgba(8,9,13,.6); }
.gift-toggle.on { border-color: var(--gold-500); background: rgba(255,138,76,.08); box-shadow: 0 0 0 3px rgba(242,100,30,.14); }
.gift-toggle input { display: none; }
.gift-check {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 3px;
  border: 2px solid var(--navy-600); display: grid; place-items: center;
  color: #160B04; font-size: 13px; font-weight: 900; transition: .2s;
}
.gift-toggle.on .gift-check { background: var(--gold-500); border-color: var(--gold-500); }
.gift-txt { display: flex; flex-direction: column; line-height: 1.3; }
.gift-txt b { font-size: 15px; color: var(--cream-50); font-weight: 800; }
.gift-txt i { font-size: 12.5px; color: rgba(243,241,235,.6); font-style: normal; }

/* footer legal */
.bld-foot {
  position: relative; z-index: 1;
  text-align: center; padding: 30px 32px 50px; color: var(--ink-faint); font-size: 12.5px;
}
.bld-foot b { color: rgba(243,241,235,.7); }
.bld-foot-links { display: flex; gap: 18px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.bld-foot-links a { color: rgba(243,241,235,.6); text-decoration: none; font-weight: 700; text-transform: uppercase; font-size: 11.5px; letter-spacing: .05em; }
.bld-foot-links a:hover { color: var(--gold-400); }

/* responsive */
@media (max-width: 920px) {
  .bld-grid { grid-template-columns: 1fr; }
  .summary-wrap { position: static; }
  .hero-pick { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .bld-shell { padding: 32px 18px 70px; }
  .bld-header-in { padding: 14px 18px; }
  .fld { padding: 24px 20px; }
  .grid2 { grid-template-columns: 1fr; }
  .hero-pick { grid-template-columns: 1fr; }
  .pack { grid-template-columns: 22px 1fr; }
  .pack-price { grid-column: 2; text-align: left; }
}

/* ============================================================
   WARM-FAIRYTALE HARMONIZATION
   soften the old "console" grit: elegant mixed-case serif headings,
   rounded corners (no notch clip-paths), pill buttons.
   ============================================================ */
.builder-page { background:
    radial-gradient(70% 50% at 85% -5%, rgba(244,213,138,.14), transparent 55%),
    radial-gradient(60% 40% at 5% 100%, rgba(187,169,226,.12), transparent 55%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900));
}
.builder-page::before { display: none; }   /* drop halftone dots */
.bld-header { background: rgba(10,18,48,.82); }

/* mixed-case elegant headings (Cormorant) instead of uppercase */
.bld-intro h1,
.fld-head h2,
.pack-info .pn,
.hpick .hn,
.summary h3 { text-transform: none; letter-spacing: 0; }

/* remove sharp notch clip-paths → soft rounded */
.fld-num { clip-path: none; border-radius: 14px; }
.summary { clip-path: none; }

/* pill buttons + pill order-back chip, matching landing */
.builder-page .btn { border-radius: 999px; text-transform: none; letter-spacing: .01em; }
.bld-back { border-radius: 999px; text-transform: none; letter-spacing: 0; }

/* tag chips keep their small-caps label feel but rounder */
.pack-tag, .addon .ap.inc { border-radius: 999px; }

/* ============================================================
   MATERIJALI u narudžbi — pregled sadržaja odabranog paketa + sličica dodatka
   (mockupi iz src/materials.js; lightbox stil je u styles.css)
   ============================================================ */
.pack-preview {
  margin-top: 14px; padding: 16px 18px 14px; border-radius: var(--radius);
  background: rgba(8,9,13,.35); border: 1px dashed rgba(244,213,138,.32);
}
.pp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pp-label { font-family: var(--mono); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-50); }
.pp-count { font-size: 12px; color: rgba(243,241,235,.55); }
.pp-strip {
  display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(244,213,138,.4) transparent;
}
.pp-item {
  flex: 0 0 132px; scroll-snap-align: start; padding: 0; margin: 0;
  background: none; border: none; cursor: zoom-in; color: inherit; font-family: var(--sans); text-align: left;
}
.pp-item img {
  display: block; width: 132px; height: 88px; object-fit: cover; border-radius: 10px;
  border: 1px solid rgba(244,213,138,.38); box-shadow: 0 14px 26px -16px rgba(0,0,0,.8);
  transition: transform .2s, border-color .2s;
}
.pp-item:hover img, .pp-item:focus-visible img { transform: translateY(-2px); border-color: rgba(244,213,138,.8); }
.pp-item:focus-visible { outline: 3px solid rgba(244,213,138,.45); outline-offset: 3px; border-radius: 10px; }
.pp-name { display: block; margin-top: 7px; font-size: 11.5px; font-weight: 700; line-height: 1.3; color: rgba(243,241,235,.8); }
.pp-name em { font-style: normal; color: #aecbff; }

.addon-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.addon-thumb {
  flex-shrink: 0; padding: 0; margin: 0; background: none; border: none; cursor: zoom-in;
  border-radius: 8px; overflow: hidden; line-height: 0;
}
.addon-thumb img {
  display: block; width: 64px; height: 43px; object-fit: cover; border-radius: 8px;
  border: 1px solid rgba(244,213,138,.4); transition: transform .2s, border-color .2s;
}
.addon-thumb:hover img, .addon-thumb:focus-visible img { transform: scale(1.04); border-color: rgba(244,213,138,.85); }
.addon-thumb:focus-visible { outline: 3px solid rgba(244,213,138,.45); outline-offset: 2px; }
@media (max-width: 560px) {
  .pp-item { flex-basis: 116px; }
  .pp-item img { width: 116px; height: 77px; }
  .addon-main { align-items: flex-start; }
  /* Cijena silazi u vlastiti red desno — u tri kolone tekstu na 360 px ostane ~110 px, ovako ~165 px. */
  .addon { grid-template-columns: 22px 1fr; align-items: start; gap: 8px 10px; padding: 13px 14px; }
  .addon .check { margin-top: 1px; }
  .addon .ap { grid-column: 2; justify-self: end; font-size: 18px; }
  /* Oznaka ("Najčešće birani dodatak") je na uskom ekranu preduga za jedan red: pusti je da se
     prelomi i daj joj blazi radijus da prelomljena ne izgleda kao deformirana pilula. */
  .addon-badge { display: block; width: fit-content; margin: 6px 0 0; white-space: normal; border-radius: 8px; line-height: 1.35; }
  .addon .an { font-size: 14px; }
  .addon-thumb img { width: 52px; height: 35px; }
}

/* ============================================================
   LISTA ČEKANJA u checkoutu — isti modal kao na naslovnici (WaitlistModal, .wlm-* u styles.css).
   Gore: banner s gumbom desno. U sažetku: pečat + zlatni gumb umjesto „Nastavi na plaćanje”.
   Gumb u stanju „Na listi si” (is-on) postaje mirna potvrda, ali i dalje otvara modal (drugi e-mail).
   ============================================================ */
.shop-paused-banner > div { flex: 1; min-width: 0; }
.shop-paused-banner.has-wl { padding: 18px 22px; }
.spb-body { display: block; }
.spb-alt { display: block; margin-top: 6px; font-size: 13px; color: rgba(252,248,238,.62); }
.spb-alt a { font-weight: 700; }
.spb-cta {
  flex-shrink: 0; align-self: center; white-space: nowrap;
  padding: 13px 22px; font-size: 14.5px;
  box-shadow: 0 16px 34px -14px rgba(239,195,104,.9), 0 0 0 4px rgba(244,213,138,.12);
}
.spb-cta.is-on, .spc-btn.is-on {
  background: rgba(244,213,138,.1); color: var(--gold-300);
  border: 1px solid rgba(244,213,138,.5); box-shadow: none;
}
.spb-cta.is-on:hover, .spc-btn.is-on:hover { background: rgba(244,213,138,.16); transform: none; }

.shop-paused-cta.has-wl {
  gap: 0; padding: 22px 20px 18px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(244,213,138,.14), transparent 60%),
    rgba(244,213,138,.06);
  border: 1px dashed rgba(244,213,138,.5);
  box-shadow: inset 0 0 0 4px rgba(6,11,30,.35);
}
/* .shop-paused-cta span (gore) ima veću specifičnost — zato .shop-paused-cta .spc-* */
.shop-paused-cta .spc-stamp {
  display: inline-block; margin: 0 auto; padding: 7px 14px; border-radius: 999px;
  font-family: var(--sans); font-weight: 900; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy-900); background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  box-shadow: 0 10px 22px -12px rgba(244,213,138,.9);
}
.shop-paused-cta .spc-text { display: block; margin: 14px 0 0; font-size: 13.5px; line-height: 1.55; color: rgba(252,248,238,.78); }
.spc-btn { width: 100%; justify-content: center; margin-top: 16px; padding: 15px 20px; font-size: 15px; white-space: normal; }
.shop-paused-cta .spc-note { display: block; margin-top: 10px; font-size: 12px; line-height: 1.5; color: rgba(252,248,238,.55); }
.spc-mail { display: inline-block; margin-top: 10px; font-size: 12.5px; color: rgba(252,248,238,.6); text-decoration: underline; text-underline-offset: 3px; }
.spc-mail:hover { color: var(--gold-300); }
@media (max-width: 680px) {
  .shop-paused-banner.has-wl { flex-wrap: wrap; }
  .shop-paused-banner.has-wl .spb-ic { order: -2; }
  .shop-paused-banner.has-wl .spb-body { flex-basis: calc(100% - 60px); }
  .spb-cta { flex-basis: 100%; justify-content: center; white-space: normal; margin-top: 4px; }
}

/* ============================================================
   KONVERZIJA (18.9.) — mobilna traka s ukupnim iznosom, heroji 3×3 na mobitelu,
   napredak uploada po fotki, „stiže odmah” na digitalnim dodacima, kraće privole
   ============================================================ */
/* traka: vidljiva dok sažetak (s gumbom za plaćanje) nije na ekranu — ispod 920 px sažetak pada na dno stranice */
.bld-mobile-bar { display: none; }
@media (max-width: 920px) {
  .bld-mobile-bar {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 80;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 10px 10px 16px; border-radius: 16px;
    background: rgba(10,18,48,.94); backdrop-filter: blur(10px);
    border: 1px solid rgba(244,213,138,.3); box-shadow: 0 20px 44px -16px rgba(0,0,0,.6);
    transition: transform .3s ease, opacity .3s ease;
  }
  .bld-mobile-bar.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
  .bmb-info { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
  .bmb-info b { color: var(--cream-50); font-size: 14.5px; }
  .bmb-info span { color: rgba(252,248,238,.66); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bld-mobile-bar .btn { padding: 12px 18px; font-size: 14.5px; white-space: nowrap; margin: 0; flex-shrink: 0; }
  .bld-mobile-bar .btn[disabled] { opacity: .6; }
  .bld-shell { padding-bottom: 120px; }
}
/* heroji: 3×3 mreža i na mobitelu (bilo je 9 kartica jedna ispod druge = 3,6 ekrana) */
@media (max-width: 540px) {
  .hero-pick { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hp-body { padding: 8px 8px 9px; }
  .hpick .hn { font-size: 12.5px; }
  .hpick .ht { display: none; }
  .hpick .tick { width: 20px; height: 20px; top: 6px; right: 6px; font-size: 12px; }
}
/* upload odmah pri odabiru: napredak, kvačica, ponovni pokušaj */
.thumb-prog { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 5px; border-radius: 999px; background: rgba(6,11,30,.6); overflow: hidden; }
.thumb-prog span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-400), var(--gold-300)); transition: width .2s; }
.thumb.st-uploading img { opacity: .55; }
.thumb-ok {
  position: absolute; left: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 900; color: #160B04;
  background: var(--gold-400); box-shadow: 0 4px 10px -2px rgba(0,0,0,.5);
}
.thumb.st-error img { opacity: .4; filter: grayscale(.6); }
.thumb-retry {
  position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 5px 0; border: none; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 800; color: #160B04; background: var(--gold-400);
}
/* digitalni dodaci: „stiže odmah” uz cijenu */
.addon .ap small { display: block; font-family: var(--sans); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(243,241,235,.55); text-align: right; margin-top: 2px; }
/* privole: prvi red podebljan, ostatak sitnije */
.consent .ctx small { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.45; color: rgba(243,241,235,.6); }
.consent .ctx small a { color: var(--gold-400); font-weight: 700; }
/* oznaka neobveznog koraka u naslovu */
.fld-head .opt.soft { color: rgba(243,241,235,.45); }
/* korak „Upoznajmo tvog heroja”: topla napomena da je sve neobvezno (isti recept kao .hero-note, zlatni okvir) */
.know-note {
  display: flex; align-items: flex-start; gap: 12px; margin: -4px 0 18px; padding: 13px 15px;
  font-size: 13.5px; line-height: 1.55; color: rgba(243,241,235,.78);
  background: rgba(233,177,89,.07); border: 1px dashed rgba(233,177,89,.42); border-radius: var(--radius);
}
.know-note .kn-ic { flex-shrink: 0; color: var(--gold-400); font-size: 15px; line-height: 1.4; }
.know-note b { color: var(--gold-300); font-weight: 700; }
.know-note .kn-soft { display: block; margin-top: 5px; font-size: 12.5px; color: rgba(243,241,235,.55); }