/* Buyer's Guide in 3D (samtastic-core 1.21.344). On top of hdb-3d.css, new-launches-3d.css and playbook-3d.css. */

/* ---------- Journey bar (sticky on every guide page) ---------- */
.g3d-journey { position: sticky; top: var(--g3d-jtop, 0px); z-index: 8; background: rgba(11,18,32,.96); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px); }
.g3d-journey__in { max-width: 1240px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 10px; }
.g3d-journey__home { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(255,255,255,.08); color: #fff !important; text-decoration: none; font-size: 17px; }
.g3d-journey__steps { flex: 1 1 auto; display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.g3d-journey__steps::-webkit-scrollbar { display: none; }
.g3d-journey__steps li { flex: 0 0 auto; }
.g3d-journey__steps a { display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; border-radius: 999px; color: #c7d2e2 !important; text-decoration: none; font: 600 12.5px/1 Inter, sans-serif; white-space: nowrap; }
.g3d-journey__steps a:hover { background: rgba(255,255,255,.08); }
.g3d-journey__steps i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.12); font: 800 11px/1 "Plus Jakarta Sans", sans-serif; font-style: normal; color: #fff; }
.g3d-journey__steps li.is-done i { background: #1a9850; }
.g3d-journey__steps li.is-done i::before { content: "✓"; }
.g3d-journey__steps li.is-done i { font-size: 0; }
.g3d-journey__steps li.is-done i::before { font-size: 11px; }
.g3d-journey__steps li.is-here a { background: var(--h3d-sun, #f5b84d); color: #0b1220 !important; }
.g3d-journey__steps li.is-here i { background: #0b1220; color: #fff; }
.g3d-journey__me { flex: 0 0 auto; display: flex; gap: 6px; font: 600 12px/1 Inter, sans-serif; }
.g3d-journey__me a, .g3d-journey__me span { padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.08); color: #c7d2e2 !important; text-decoration: none; white-space: nowrap; }
.g3d-journey__me b { color: #fff; }

/* ---------- Continue-with links ---------- */
.g3d-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--h3d-line, #e2e8f0); }
.g3d-links:empty { display: none; }
.g3d-links__k { width: 100%; font: 700 10.5px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--h3d-muted, #5b6b7e); }
.g3d-pill { display: inline-flex; align-items: center; padding: 7px 11px; border-radius: 999px; background: #eef3fb; color: var(--h3d-accent, #1f6feb) !important; text-decoration: none; font: 700 12px/1.1 Inter, sans-serif; }
.g3d-pill:hover { background: #dfe9fa; }
.g3d-pill--gold { background: #fff3d6; color: #8a5a00 !important; }
.g3d-links--panel { border-top: 1px solid var(--h3d-line, #e2e8f0); }
.g3d-star { margin: 2px 0 10px; padding: 7px 12px; border: 1px solid var(--h3d-line, #e2e8f0); border-radius: 999px; background: #fff; color: var(--h3d-ink, #0b1b2e); font: 700 12px/1 Inter, sans-serif; cursor: pointer; }
.g3d-star.is-on { background: #fff3d6; border-color: #f5b84d; color: #8a5a00; }

/* ---------- Charts and small UI ---------- */
.g3d-chart { color: var(--h3d-ink, #0b1b2e); margin: 4px 0; }
.g3d-chart text { font: 500 9.5px/1 Inter, sans-serif; fill: var(--h3d-muted, #5b6b7e); }
.g3d-vbars text.v { font-weight: 700; fill: var(--h3d-ink, #0b1b2e); }
.g3d-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 2px 0 6px; font: 600 11px/1.2 Inter, sans-serif; color: var(--h3d-muted, #5b6b7e); }
.g3d-leg i { display: inline-block; width: 10px; height: 3px; margin-right: 5px; border-radius: 2px; vertical-align: middle; }
.g3d-range { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; }
.g3d-range input { flex: 1 1 auto; }
.g3d-range output { min-width: 78px; text-align: right; font: 800 18px/1 "Plus Jakarta Sans", sans-serif; font-variant-numeric: tabular-nums; color: var(--h3d-ink, #0b1b2e); }
.g3d-progress { height: 8px; border-radius: 4px; background: #e8eef6; overflow: hidden; margin: 6px 0 2px; }
.g3d-progress i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #1a9850, #74c476); transition: width .3s; }
.g3d-ok { color: #1a9850; font-weight: 800; }
.g3d-no { color: #c0392b; font-weight: 800; }
.g3d-warn { color: #b45309; font-weight: 800; }
.g3d-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.g3d-tbl-sm { font-size: 12px; }
.g3d-tbl-sm th, .g3d-tbl-sm td { padding: 5px 4px; }
.g3d-tbl-sm td small { font-size: 10px; }
.h3d__vs-table tr.is-hit th, .h3d__vs-table tr.is-hit td, .h3d__vs-table tr.is-ok th { background: #fff8e6; }
.g3d-cmp { min-width: 320px; }
.g3d-cmp thead th:nth-child(2) { box-shadow: inset 0 -3px 0 #ffd166; }
.g3d-cmp thead th:nth-child(3) { box-shadow: inset 0 -3px 0 #00e5ff; }
.g3d-cmp thead th:nth-child(4) { box-shadow: inset 0 -3px 0 #ff6b9a; }
.g3d-cmp-pick { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.g3d-cmp-pick i { flex: 0 0 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--c); }
.g3d-cmp-pick select, .g3d-cmp-pick input { flex: 1 1 auto; min-width: 0; padding: 8px 10px; border: 1px solid var(--h3d-line, #e2e8f0); border-radius: 10px; background: #f6f8fb; font: 600 13px/1.2 Inter, sans-serif; color: var(--h3d-ink, #0b1b2e); }
.g3d-wt { display: grid; grid-template-columns: 110px 1fr 22px; align-items: center; gap: 8px; margin: 2px 0; font: 600 12px/1.2 Inter, sans-serif; }
.g3d-wt input { accent-color: var(--h3d-accent, #1f6feb); }
.g3d-wt output { text-align: right; font-weight: 800; }
.h3d__bars li.is-fit span, .h3d__bars li.is-fit b { font-weight: 800; color: #1a9850; }
.h3d__list li.is-hit, .h3d__rank li.is-hit { background: #fff3d6; }
.h3d__list li[data-action], .h3d__rank li[data-action], .g3d-route li[data-action] { cursor: pointer; }
.g3d .h3d__search--wide input { margin: 2px 0 8px; }
.g3d input[type="date"] { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--h3d-line, #e2e8f0); background: #f6f8fb; font: 600 13px/1.2 Inter, sans-serif; }

/* Journey steps (hub) */
.g3d-steps { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 6px; }
.g3d-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding: 8px 10px; border-radius: 12px; background: #f3f6fa; }
.g3d-steps li.is-done { background: #eaf6ee; }
.g3d-steps i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--h3d-accent, #1f6feb); color: #fff; font: 800 12px/1 "Plus Jakarta Sans", sans-serif; font-style: normal; }
.g3d-steps li.is-done i { background: #1a9850; }
.g3d-steps b { display: block; font: 800 13.5px/1.3 "Plus Jakarta Sans", sans-serif; }
.g3d-steps span { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 600 12px/1.4 Inter, sans-serif; }
.g3d-steps span a { color: var(--h3d-accent, #1f6feb) !important; text-decoration: none; }

/* Cards (tools / next) */
.g3d-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 6px; }
.g3d-card { display: block; padding: 10px 11px; border-radius: 12px; background: #f3f6fa; border: 1px solid transparent; color: var(--h3d-ink, #0b1b2e) !important; text-decoration: none; transition: border-color .15s, transform .15s; }
.g3d-card:hover { border-color: var(--h3d-accent, #1f6feb); transform: translateY(-1px); }
.g3d-card b { display: block; font: 800 13px/1.25 "Plus Jakarta Sans", sans-serif; }
.g3d-card span { display: block; margin-top: 3px; font: 500 11px/1.35 Inter, sans-serif; color: var(--h3d-muted, #5b6b7e); }
.g3d-card.is-done { background: #eaf6ee; }
.g3d-cards--sm .g3d-card { padding: 8px 10px; }

/* Checklists */
.g3d-ck { margin: 6px 0; border: 1px solid var(--h3d-line, #e2e8f0); border-radius: 12px; background: #fff; }
.g3d-ck summary { cursor: pointer; padding: 9px 12px; font: 700 13px/1.3 Inter, sans-serif; }
.g3d-ck ul { list-style: none; margin: 0; padding: 0 10px 8px; display: grid; gap: 2px; }
.g3d-ck label { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; padding: 6px 4px; border-radius: 8px; font: 500 12.5px/1.45 Inter, sans-serif; cursor: pointer; }
.g3d-ck label:hover { background: #f3f6fa; }
.g3d-ck input { margin-top: 2px; width: 16px; height: 16px; accent-color: #1a9850; }
.g3d-ck input:checked + span { color: var(--h3d-muted, #5b6b7e); text-decoration: line-through; }
.g3d-compass { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 180px; margin: 4px auto 10px; }
.g3d-compass button { padding: 9px 0; border: 1px solid var(--h3d-line, #e2e8f0); border-radius: 10px; background: #fff; font: 800 12px/1 Inter, sans-serif; cursor: pointer; color: var(--h3d-ink, #0b1b2e); }
.g3d-compass button.is-active { background: var(--h3d-sun, #f5b84d); border-color: transparent; }
.g3d-compass span { display: grid; place-items: center; font-size: 22px; }
.g3d-suns { color: #f59e0b; letter-spacing: 2px; }
.g3d-dim { opacity: .2; }
.g3d-route { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 4px; }
.g3d-route li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: #f3f6fa; font: 600 12.5px/1.3 Inter, sans-serif; }
.g3d-route li b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #00b4cc; color: #fff; font-size: 11px; }
.g3d-route li:first-child b { background: #f5b84d; color: #0b1220; }
.g3d-route small { display: block; font-weight: 500; color: var(--h3d-muted, #5b6b7e); }

/* ---------- Keep going grid + original tool ---------- */
.g3d-more { position: relative; z-index: 2; background: #eef3f8; padding: 48px 16px 24px; }
.g3d-more__in, .g3d-tool__in { max-width: 1240px; margin: 0 auto; }
.g3d-more h2, .g3d-tool h2 { margin: 4px 0 16px; font: 800 clamp(22px, 3vw, 30px)/1.15 "Plus Jakarta Sans", sans-serif; color: var(--h3d-ink, #0b1b2e); }
.g3d-more .h3d__eyebrow, .g3d-tool .h3d__eyebrow { color: var(--h3d-accent, #1f6feb); margin: 0; }
.g3d-more__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.g3d-tile { position: relative; display: block; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--h3d-line, #e2e8f0); color: var(--h3d-ink, #0b1b2e) !important; text-decoration: none; box-shadow: 0 10px 30px -24px rgba(11,27,46,.5); transition: transform .15s, border-color .15s; }
.g3d-tile:hover { transform: translateY(-2px); border-color: var(--h3d-accent, #1f6feb); }
.g3d-tile b { display: block; font: 800 15px/1.25 "Plus Jakarta Sans", sans-serif; }
.g3d-tile span { display: block; margin-top: 4px; font: 500 12.5px/1.4 Inter, sans-serif; color: var(--h3d-muted, #5b6b7e); }
.g3d-tile::after { content: "3D"; position: absolute; right: 12px; top: 12px; padding: 2px 6px; border-radius: 6px; background: #0b1220; color: #f5b84d; font: 800 9.5px/1.2 Inter, sans-serif; }
.g3d-tile.is-done::after { content: "✓ visited"; background: #1a9850; color: #fff; }
.g3d-tool { position: relative; z-index: 2; background: #eef3f8; padding: 24px 16px 40px; scroll-margin-top: calc(var(--h3d-top, 72px) + 8px); }
.g3d-tool__body { padding: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--h3d-line, #e2e8f0); box-shadow: 0 20px 40px -32px rgba(11,27,46,.35); overflow-wrap: anywhere; }
.g3d-tool__body > :first-child { margin-top: 0; }
.g3d .h3d__disclaimer { background: #eef3f8; margin: 0; max-width: none; padding: 0 16px 32px; }
.g3d .h3d__disclaimer::before { content: ""; display: block; max-width: 1240px; margin: 0 auto; }

/* ---------- Phones ---------- */
@media (max-width: 900px) {
	.g3d-journey__in { padding: 6px 10px; gap: 6px; }
	.g3d-journey__steps a { padding: 5px 8px 5px 5px; font-size: 12px; }
	.g3d-journey__steps li:not(.is-here) span { display: none; }
	.g3d-journey__me span { display: none; }
	.g3d-journey__me a { padding: 6px 8px; }
}
@media (max-width: 520px) {
	.g3d-cards { grid-template-columns: 1fr; }
	.g3d-tool__body { padding: 14px; }
	.g3d-wt { grid-template-columns: 92px 1fr 20px; }
	.g3d-more { padding: 32px 12px 16px; }
	.g3d-tool { padding: 16px 10px 32px; }
}
.g3d .h3d__lead { margin-left: auto; margin-right: auto; }
.g3d .h3d__meta a, .g3d .h3d__meta a:visited { color: var(--h3d-sun, #f5b84d) !important; }
.g3d a.h3d__scroll, .g3d a.h3d__scroll:visited { color: #fff !important; }

/* ---------- Seller's Guide (1.21.345) ---------- */
.g3d-cta { position: sticky; bottom: 12px; z-index: 9; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 1240px; margin: 0 auto 12px; padding: 10px 12px 10px 16px; border-radius: 18px; background: rgba(11,18,32,.95); color: #fff; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); backdrop-filter: blur(10px); }
.g3d-cta__txt { flex: 1 1 260px; font: 500 13px/1.35 Inter, sans-serif; color: #c7d2e2; }
.g3d-cta__txt b { color: #fff; }
.g3d-cta__btn { display: inline-flex; align-items: center; padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff !important; text-decoration: none; font: 700 13px/1 Inter, sans-serif; white-space: nowrap; }
.g3d-cta__btn:hover { background: rgba(255,255,255,.18); }
.g3d-cta__btn--wa { background: #25d366; color: #06301a !important; }
.g3d-cta__btn--gold { background: var(--h3d-sun, #f5b84d); color: #0b1220 !important; }
.g3d--seller .g3d-more, .g3d--seller .g3d-tool { padding-bottom: 32px; }
.g3d-ctarow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.g3d-avoid { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 6px; }
.g3d-avoid li { padding: 9px 12px 9px 34px; border-radius: 12px; background: #fff6ec; position: relative; }
.g3d-avoid li::before { content: "!"; position: absolute; left: 10px; top: 9px; width: 16px; height: 16px; border-radius: 50%; background: #f28e4c; color: #fff; font: 800 11px/16px Inter, sans-serif; text-align: center; }
.g3d-avoid b { display: block; font: 800 13px/1.3 "Plus Jakarta Sans", sans-serif; }
.g3d-avoid span { display: block; font: 500 12px/1.45 Inter, sans-serif; color: var(--h3d-muted, #5b6b7e); }
.g3d .h3d__search { position: relative; }
.seller-guide h3 { margin: 22px 0 8px; font: 800 18px/1.25 "Plus Jakarta Sans", sans-serif; }
.seller-guide ol, .seller-guide ul { padding-left: 20px; line-height: 1.6; }
.seller-guide li { margin: 4px 0; }
.seller-guide__cta { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 8px; }
.seller-guide .h3d__btn--ghost { color: var(--h3d-ink, #0b1b2e) !important; }
@media (max-width: 900px) {
	.g3d-cta { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); margin: 0 8px 8px; padding: 8px; gap: 6px; }
	.g3d-cta__txt { display: none; }
	.g3d-cta__btn { flex: 1 1 auto; justify-content: center; padding: 9px 8px; font-size: 12px; }
}
@media (max-width: 900px) { .g3d--seller .h3d__card { padding-bottom: calc(8vh + 64px); } }
.g3d--seller .h3d__legend { bottom: 88px; }
.g3d--seller .h3d__attrib { bottom: 72px; }
@media (max-width: 900px) { .g3d--seller .h3d__legend, .g3d--seller .h3d__attrib { display: none; } }