/* Rune Forge lettering: self-hosted WOFF2 (SIL OFL / Apache 2.0), no third-party font requests. */
@font-face { font-family:'AG Classic'; src:url('../fonts/Cinzel-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'AG Sturdy'; src:url('../fonts/RobotoSlab-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'AG Rugged'; src:url('../fonts/Oswald-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
/* Personalized Viking Gifts (prototype) — scoped to #asgard-gifts. Same tokens as the runes tool and the name generator. */
#asgard-gifts { --ag-maroon:#7A1F1F; --ag-maroon-d:#5a1616; --ag-gold:#B8860B; --ag-gold-l:#E8C872; --ag-ink:#2b1d14; --ag-parch:#f6ecd4;
  --ag-parch-d:#e9d8b0; --ag-muted:#6b5a48; max-width:1120px; margin:0 auto; color:var(--ag-ink);
  font-family:'EB Garamond','Noto Sans Runic',Georgia,serif; font-size:18px; line-height:1.55; }
#asgard-gifts *, #asgard-gifts *::before, #asgard-gifts *::after { box-sizing:border-box; }
#asgard-gifts img { margin:0 !important; max-width:100%; height:auto; }   /* the theme adds a bottom margin to every img */
#asgard-gifts [hidden] { display:none !important; }
#asgard-gifts ol, #asgard-gifts ul { list-style:none !important; margin-left:0 !important; padding-left:0 !important; }
#asgard-gifts li::marker { content:'' ; }
#asgard-gifts li::before { content:none; }
#asgard-gifts h2, #asgard-gifts h3 { font-family:'Cinzel',serif; color:var(--ag-maroon); line-height:1.15; margin:0 0 .5em; }
#asgard-gifts .ag-proto { background:#fff6d8; border:1px dashed var(--ag-gold); border-radius:10px; padding:6px 12px; font-size:.85rem; color:var(--ag-muted); text-align:center; margin:0 0 14px; }
/* 0.22.2 (Glen 10/20/26): the 'ordering is currently disabled' notice, a little bigger and louder than the old prototype line (REMOVE with the template block when ordering opens) */
#asgard-gifts .ag-closed { background:#fbe6ad; border:2px solid var(--ag-maroon); border-radius:12px; padding:14px 20px 15px; margin:0 0 16px; text-align:center; color:var(--ag-ink); font-size:1.08rem; line-height:1.45; box-shadow:0 2px 0 rgba(122,31,31,.18); }
#asgard-gifts .ag-closed strong { display:block; font-family:'Cinzel',serif; font-size:1.3rem; line-height:1.2; color:var(--ag-maroon); margin-bottom:4px; }
@media (max-width:640px) { #asgard-gifts .ag-closed { padding:11px 14px 12px; font-size:1rem; } #asgard-gifts .ag-closed strong { font-size:1.15rem; } }

/* ENTRY (0.6.0, Glen 10/15/26): the finished product first, one primary button. Image left, copy right; stacked on phones. */
#asgard-gifts .ag-entry { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:28px; align-items:center; background:linear-gradient(135deg,#fffaf0,var(--ag-parch));
  border:1px solid var(--ag-parch-d); border-radius:18px; padding:24px 28px; margin-bottom:18px; }
#asgard-gifts .ag-kicker { font-family:'Cinzel',serif; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ag-gold); margin:0 0 6px; }
#asgard-gifts .ag-entry-h { font-size:clamp(1.6rem,3.2vw,2.3rem); margin:0 0 6px; }
#asgard-gifts .ag-entry-sum { font-size:1.12rem; margin:0 0 8px; color:var(--ag-maroon); font-weight:600; }
#asgard-gifts .ag-entry-sum:empty { display:none; }
#asgard-gifts .ag-entry-sub { font-size:1.02rem; margin:0 0 16px; max-width:44em; }
#asgard-gifts .ag-entry-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 16px; }
#asgard-gifts .ag-entry-actions .ag-btn { margin:0; }
#asgard-gifts .ag-make-mine { font-size:1.12rem; padding:15px 32px; background:linear-gradient(180deg,#a0302f,#7A1F1F); box-shadow:0 2px 0 #4a1010, 0 6px 18px rgba(122,31,31,.25); transition:transform .15s, filter .15s; }
#asgard-gifts .ag-make-mine:hover:not([disabled]) { background:linear-gradient(180deg,#b33a38,#862323); transform:translateY(-1px); }
#asgard-gifts .ag-trust { list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:.92rem; }
#asgard-gifts .ag-trust span { color:var(--ag-gold); margin-right:6px; }
#asgard-gifts .ag-entry-fig { margin:0; text-align:center; background:#fff; border-radius:16px; padding:12px; box-shadow:0 6px 24px rgba(43,29,20,.10); }
#asgard-gifts .ag-entry-fig img { border-radius:10px; max-height:420px; width:auto; transition:opacity .15s; }
#asgard-gifts .ag-entry-fig img[data-noimg] { background:var(--ag-parch); min-height:240px; }
#asgard-gifts .ag-entry-cap { font-size:.95rem; margin-top:8px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
#asgard-gifts .ag-entry-label { font-weight:600; }
#asgard-gifts .ag-entry-price { color:var(--ag-maroon); font-weight:600; }
#asgard-gifts.ag-open .ag-entry { grid-template-columns:minmax(0,1fr) minmax(0,2fr); padding:14px 20px; gap:18px; }   /* once the steps are open the card slims down */
#asgard-gifts.ag-open .ag-entry-fig { display:none; }
#asgard-gifts.ag-open .ag-entry-sub, #asgard-gifts.ag-open .ag-entry-actions, #asgard-gifts.ag-open .ag-trust { display:none; }
#asgard-gifts.ag-open .ag-entry-h { font-size:1.25rem; margin:0; }
#asgard-gifts.ag-open .ag-entry-copy { grid-column:1/-1; display:flex; gap:14px; align-items:baseline; flex-wrap:wrap; }
#asgard-gifts.ag-open .ag-entry-copy .ag-kicker { display:none; }
#asgard-gifts.ag-open .ag-entry-sum { margin:0; font-size:1rem; }
#asgard-gifts .ag-stepline { display:none; margin:0 0 10px; font:600 .95rem 'EB Garamond',serif; color:var(--ag-maroon); text-align:center; }

/* progress */
#asgard-gifts .ag-progress { list-style:none; display:flex; gap:8px; margin:0 0 16px; padding:0; counter-reset:none; }
#asgard-gifts .ag-progress li { flex:1; margin:0; }
#asgard-gifts .ag-progress button { width:100%; font:600 .82rem 'Cinzel',serif; letter-spacing:.04em; color:var(--ag-muted); background:#fff; border:1px solid var(--ag-parch-d);
  border-radius:999px; padding:9px 10px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; }
#asgard-gifts .ag-progress b { display:inline-grid; place-items:center; width:20px; height:20px; font-size:.95rem; line-height:1; border-radius:50%; background:var(--ag-parch); color:var(--ag-maroon); font-size:.75rem; }
#asgard-gifts .ag-progress li.is-done b { background:var(--ag-gold-l); }
#asgard-gifts .ag-progress li.is-on button { background:var(--ag-maroon); color:#fff; border-color:var(--ag-maroon); }
#asgard-gifts .ag-progress li.is-on b { background:#fff; }

/* builder */
/* desktop (spec §4.1): the preview is the hero, left and sticky (~55%); the steps on the right */
#asgard-gifts .ag-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:22px; align-items:start; }
#asgard-gifts .ag-steps, #asgard-gifts .ag-preview, #asgard-gifts .ag-result { background:#fff; border:1px solid var(--ag-parch-d); border-radius:16px; padding:22px; box-shadow:0 2px 10px rgba(43,29,20,.06); }
#asgard-gifts .ag-preview { position:sticky; top:72px; order:-1; }
/* the artwork-ink toggle (Glen 10/15/26): small, under the preview, always there when the design has two renditions */
/* quick ideas (words step) */
#asgard-gifts .ag-ideas { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 0; }
#asgard-gifts .ag-idea { border:1.5px solid var(--ag-parch-d); border-radius:999px; background:#fffdf8; color:var(--ag-maroon); font:.9rem 'EB Garamond',serif; padding:4px 12px; min-height:32px; cursor:pointer; }
#asgard-gifts .ag-idea:hover, #asgard-gifts .ag-idea:focus-visible { background:var(--ag-parch); border-color:var(--ag-gold); }
/* 0.18.0 Inspire me (ZAT-T189): the hook picker + the button sit at the end of the quick-ideas row (no new row, so the fitted steps never scroll) */
#asgard-gifts .ag-insp { display:inline-flex; gap:4px; align-items:center; }
#asgard-gifts .ag-insp select { border:1.5px solid var(--ag-parch-d); border-radius:999px; background:#fffdf8; color:var(--ag-ink, #2a211c); font:.85rem 'EB Garamond',serif; padding:2px 6px; min-height:32px; max-width:13em; }
#asgard-gifts .ag-inspire-btn { background:var(--ag-maroon); color:#fff; border-color:var(--ag-maroon); }
#asgard-gifts .ag-inspire-btn:hover, #asgard-gifts .ag-inspire-btn:focus-visible { background:#5e1717; color:#fff; }
#asgard-gifts .ag-step h3 { font-size:1.3rem; }
#asgard-gifts label, #asgard-gifts legend { font-family:'Cinzel',serif; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ag-muted); }
#asgard-gifts fieldset { border:0; padding:0; margin:14px 0 0; min-width:0; }
#asgard-gifts legend { display:block; margin-bottom:6px; padding:0; }
#asgard-gifts #ag-text { width:100%; font:1.35rem 'EB Garamond',serif; padding:12px 14px; border:2px solid var(--ag-parch-d); border-radius:12px; margin-top:4px; color:var(--ag-ink); }
#asgard-gifts #ag-text:focus, #asgard-gifts select:focus { outline:3px solid var(--ag-gold-l); border-color:var(--ag-gold); }
#asgard-gifts .ag-count { text-align:right; font-size:.8rem; color:var(--ag-muted); margin:2px 0 0; }
#asgard-gifts select { width:100%; font:1rem 'EB Garamond',serif; padding:10px; border:2px solid var(--ag-parch-d); border-radius:10px; margin:4px 0 10px; background:#fff; }
#asgard-gifts .ag-seg { display:flex; flex-wrap:wrap; gap:8px; }
#asgard-gifts .ag-seg legend { width:100%; }
#asgard-gifts .ag-seg label, #asgard-gifts .ag-fonts label, #asgard-gifts .ag-colors label { position:relative; cursor:pointer; text-transform:none; letter-spacing:0; font:1rem 'EB Garamond',serif; color:var(--ag-ink); }
#asgard-gifts .ag-seg label { border:2px solid var(--ag-parch-d); border-radius:999px; padding:7px 16px; }
#asgard-gifts input[type=radio] { position:absolute; opacity:0; width:1px; height:1px; }
#asgard-gifts .ag-seg label:has(input:checked) { border-color:var(--ag-maroon); background:#fbf1f1; color:var(--ag-maroon); font-weight:600; }
#asgard-gifts label:has(input:focus-visible) { outline:3px solid var(--ag-gold-l); outline-offset:2px; }
#asgard-gifts .ag-check { display:flex; gap:8px; align-items:center; text-transform:none; letter-spacing:0; font:1rem 'EB Garamond',serif; color:var(--ag-ink); }
#asgard-gifts .ag-runes-out { font-family:'Noto Sans Runic','Segoe UI Historic',serif; font-size:1.7rem; color:var(--ag-maroon); letter-spacing:.08em; min-height:1.4em; margin:8px 0 0; word-break:break-all; }
#asgard-gifts .ag-hint, #asgard-gifts .ag-sub, #asgard-gifts .ag-note { font-size:.9rem; color:var(--ag-muted); margin:6px 0 0; }
#asgard-gifts .ag-fonts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
#asgard-gifts .ag-fonts legend { grid-column:1/-1; }
#asgard-gifts .ag-fonts label { border:2px solid var(--ag-parch-d); border-radius:12px; padding:8px 4px; text-align:center; display:flex; flex-direction:column; }
#asgard-gifts .ag-fonts span { font-size:1.45rem; line-height:1.2; }
#asgard-gifts .ag-fonts small, #asgard-gifts .ag-colors small { font-size:.72rem; color:var(--ag-muted); }
#asgard-gifts .ag-fonts label:has(input:checked), #asgard-gifts .ag-art label:has(input:checked), #asgard-gifts .ag-products label:has(input:checked) { border-color:var(--ag-maroon); box-shadow:0 0 0 2px var(--ag-maroon) inset; }
#asgard-gifts .ag-dim { opacity:.45; }
#asgard-gifts .ag-colors { display:flex; flex-wrap:wrap; gap:12px; }
#asgard-gifts .ag-colors legend { width:100%; }
#asgard-gifts .ag-colors label { display:flex; flex-direction:column; align-items:center; gap:3px; width:74px; }
#asgard-gifts .ag-sw { width:38px; height:38px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 2px var(--ag-parch-d); }
#asgard-gifts .ag-colors label:has(input:checked) .ag-sw { box-shadow:0 0 0 3px var(--ag-maroon); }
#asgard-gifts .ag-art { min-width:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px; margin-top:10px; }
#asgard-gifts .ag-art label, #asgard-gifts .ag-products label { position:relative; cursor:pointer; border:2px solid var(--ag-parch-d); border-radius:12px; padding:8px; background:#fff;
  display:flex; flex-direction:column; align-items:center; gap:4px; text-transform:none; letter-spacing:0; font-family:'EB Garamond',serif; color:var(--ag-ink); text-align:center; }
#asgard-gifts .ag-art img { width:88px; height:88px; object-fit:contain; }
#asgard-gifts .ag-art small { font-size:.78rem; line-height:1.15; }
#asgard-gifts .ag-art-box { width:88px; height:88px; display:grid; place-items:center; font:700 2rem 'Cinzel',serif; color:var(--ag-gold); background:var(--ag-parch); border-radius:8px; }
#asgard-gifts .ag-products { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; margin-top:6px; }
#asgard-gifts .ag-products img { width:120px; height:120px; object-fit:contain; }
#asgard-gifts .ag-p-name { font-size:.95rem; line-height:1.2; }
#asgard-gifts .ag-p-price { font-size:.9rem; color:var(--ag-maroon); font-weight:600; }
#asgard-gifts .ag-nav { display:flex; gap:10px; justify-content:space-between; margin-top:20px; }
#asgard-gifts .ag-btn { font:700 1rem 'Cinzel',serif; letter-spacing:.04em; border:0; border-radius:999px; padding:13px 26px; cursor:pointer; background:var(--ag-maroon); color:#fff; margin-left:auto; }
#asgard-gifts .ag-btn:hover:not([disabled]) { background:var(--ag-maroon-d); }
#asgard-gifts .ag-btn[disabled] { background:#b9aa98; cursor:not-allowed; }
#asgard-gifts .ag-ghost { background:#fff; color:var(--ag-maroon); border:2px solid var(--ag-parch-d); margin-left:0; }
#asgard-gifts .ag-ghost:hover { background:var(--ag-parch) !important; }
#asgard-gifts .ag-make { background:linear-gradient(135deg,var(--ag-maroon),#9a2b2b); }
#asgard-gifts .ag-link { background:none; border:0; padding:0; font:inherit; color:var(--ag-maroon); text-decoration:underline; cursor:pointer; }
#asgard-gifts .ag-err { color:#9b1c1c; background:#fdecec; border-radius:8px; padding:8px 12px; font-size:.95rem; margin:10px 0 0; }

/* preview */
#asgard-gifts .ag-frame { position:relative; background:repeating-conic-gradient(#faf6ee 0 25%,#fff 0 50%) 0 0/24px 24px; border:1px solid var(--ag-parch-d); border-radius:12px;
  display:grid; place-items:center; aspect-ratio:1350/1050; overflow:hidden; }
#asgard-gifts .ag-prev { width:100%; height:100%; object-fit:contain; }
#asgard-gifts .ag-empty { color:var(--ag-muted); font-style:italic; }
#asgard-gifts .ag-spin { position:absolute; top:10px; right:10px; width:20px; height:20px; font-size:.95rem; line-height:1; border-radius:50%; border:3px solid var(--ag-parch-d); border-top-color:var(--ag-maroon); animation:ag-spin .8s linear infinite; }
@keyframes ag-spin { to { transform:rotate(360deg); } }
#asgard-gifts .ag-on { display:flex; gap:12px; align-items:center; margin-top:12px; padding:10px; border-radius:12px; background:var(--ag-parch); }
#asgard-gifts .ag-on img { width:64px; height:64px; object-fit:contain; background:#fff; border-radius:8px; }
#asgard-gifts .ag-on > div { flex:1; font-size:.95rem; }
#asgard-gifts .ag-on-price { color:var(--ag-maroon); }

/* result */
#asgard-gifts .ag-result { margin-top:22px; }
#asgard-gifts .ag-result-body { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:22px; align-items:start; }
#asgard-gifts .ag-result-body h3 { grid-column:1/-1; font-size:1.5rem; }
#asgard-gifts .ag-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
#asgard-gifts .ag-gallery img { border-radius:12px; border:1px solid var(--ag-parch-d); }
#asgard-gifts .ag-buy { background:var(--ag-parch); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:8px; }
#asgard-gifts .ag-buy .ag-btn { margin:6px 0 0; width:100%; }
#asgard-gifts .ag-r-price { font-size:1.35rem; font-weight:600; color:var(--ag-maroon); margin:0; }
#asgard-gifts .ag-r-sum, #asgard-gifts .ag-soon, #asgard-gifts .ag-r-links { margin:0; }
#asgard-gifts .ag-soon { font-size:.92rem; color:var(--ag-muted); text-align:center; }
#asgard-gifts .ag-norns { display:flex; gap:14px; align-items:center; justify-content:center; padding:24px; font-style:italic; }
#asgard-gifts .ag-norns .ag-spin { position:static; width:34px; height:34px; flex:none; }

#asgard-gifts .ag-faq { margin:26px 0 8px; }
#asgard-gifts .ag-faq details { border-bottom:1px solid var(--ag-parch-d); padding:10px 0; }
#asgard-gifts .ag-faq summary { cursor:pointer; font-weight:600; }
#asgard-gifts .ag-faq p { margin:8px 0 0; }
#asgard-gifts .ag-abroad { text-align:center; }

/* pass 2: art categories (chips), dark-only tiles, light/dark flags, unavailable tiles */
#asgard-gifts .ag-steps, #asgard-gifts .ag-step { min-width:0; }   /* grid/flex items default to min-content: keep the chip row from widening the column */
#asgard-gifts .ag-cats { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; min-width:0; min-inline-size:0; max-width:100%; }   /* a fieldset defaults to min-content width: the phone chip row would widen the panel */
#asgard-gifts .ag-cats legend { width:100%; }
#asgard-gifts .ag-cats label { position:relative; cursor:pointer; border:2px solid var(--ag-parch-d); border-radius:999px; padding:5px 12px; font:.92rem 'EB Garamond',serif; color:var(--ag-ink); text-transform:none; letter-spacing:0; background:#fff; }
#asgard-gifts .ag-cats label:has(input:checked) { border-color:var(--ag-maroon); background:#fbf1f1; color:var(--ag-maroon); font-weight:600; }
#asgard-gifts .ag-n { color:var(--ag-muted); font-size:.8em; }
#asgard-gifts .ag-gone { margin:10px 0 0; padding:10px 12px; border:1px solid var(--ag-parch-d); border-radius:12px; background:#fffaf0; }
#asgard-gifts .ag-gone p { margin:0 0 8px; }
#asgard-gifts .ag-gone-row { display:flex; flex-wrap:wrap; gap:8px; }
#asgard-gifts .ag-gone-pick { display:flex; flex-direction:column; align-items:center; gap:4px; width:96px; padding:6px; border:2px solid var(--ag-parch-d); border-radius:10px; background:#fff; color:#2b2118; cursor:pointer; font:inherit; }
#asgard-gifts .ag-gone-pick img { width:64px; height:64px; object-fit:contain; }
#asgard-gifts .ag-gone-pick small { display:block; color:#2b2118; font-size:.75rem; line-height:1.2; text-align:center; }
#asgard-gifts .ag-gone-pick:hover, #asgard-gifts .ag-gone-pick:focus-visible { border-color:var(--ag-maroon); }
#asgard-gifts .ag-art-count { margin:8px 0 0; font-size:.9rem; color:var(--ag-muted); }
#asgard-gifts .ag-art label[hidden], #asgard-gifts .ag-colors label[hidden] { display:none; }
/* art tiles sit on the chosen product color and show the rendition that will print there (renditions, 10/15/26) */
#asgard-gifts .ag-art label { background:var(--ag-tile-bg, #fff); }
#asgard-gifts .ag-art label img { border-radius:8px; }
#asgard-gifts .ag-art label.ag-tile-dark { color:#f3efe6; border-color:rgba(255,255,255,.18); }
#asgard-gifts .ag-art label.ag-tile-dark .ag-art-flag { color:#e0d6c4; }
#asgard-gifts .ag-art label.ag-tile-dark:has(input:checked) { border-color:var(--ag-gold-l); box-shadow:0 0 0 2px var(--ag-gold-l) inset; }
#asgard-gifts .ag-art .ag-art-none { background:#fff; }
#asgard-gifts .ag-art-flag, #asgard-gifts .ag-p-flag { font-style:normal; font-size:.68rem; line-height:1.1; color:var(--ag-muted); }
#asgard-gifts .ag-art-flag:empty { display:none; }
#asgard-gifts label.ag-off { opacity:.4; cursor:not-allowed; }
#asgard-gifts .ag-p-flag { color:var(--ag-maroon); }
#asgard-gifts .ag-colors label[data-on="dark"] .ag-sw { border-color:#2a2826; }
@media (max-width: 860px) {
  #asgard-gifts { font-size:17px; }
  /* phone (spec §4.2): the finished product stacks, image first; the preview pins to the top (about 40% of the screen) with the toggle */
  #asgard-gifts .ag-entry, #asgard-gifts.ag-open .ag-entry { grid-template-columns:1fr; padding:16px; gap:12px; }
  #asgard-gifts .ag-entry-fig img { max-height:300px; }
  #asgard-gifts .ag-entry-actions .ag-btn { width:100%; text-align:center; }
  #asgard-gifts.ag-open .ag-entry { display:none; }   /* the pinned preview carries the design; the card would only push it down */
  #asgard-gifts .ag-stepline { display:block; }
  #asgard-gifts .ag-grid { grid-template-columns:1fr; gap:14px; }
  #asgard-gifts .ag-preview { order:-1; position:sticky; top:0; z-index:5; padding:8px 10px 6px; }
  #asgard-gifts .ag-preview .ag-note, #asgard-gifts .ag-canvas-h, #asgard-gifts .ag-preview .ag-on { display:none; }
  #asgard-gifts .ag-frame { max-height:32vh; }
  #asgard-gifts .ag-on { margin-top:8px; padding:6px; }
  #asgard-gifts .ag-on img { width:44px; height:44px; }
  #asgard-gifts .ag-progress { gap:4px; margin-bottom:6px; }
  #asgard-gifts .ag-progress button { font-size:.62rem; padding:6px 2px; gap:3px; flex-direction:column; min-height:44px; }
  #asgard-gifts .ag-progress button span { white-space:nowrap; }
  #asgard-gifts .ag-fonts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #asgard-gifts .ag-steps, #asgard-gifts .ag-result { padding:16px; }
  #asgard-gifts .ag-result-body { grid-template-columns:1fr; }
  #asgard-gifts .ag-products { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #asgard-gifts .ag-art { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #asgard-gifts .ag-art img, #asgard-gifts .ag-art-box { width:64px; height:64px; }
  #asgard-gifts .ag-cats { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; scrollbar-width:thin; }
  #asgard-gifts .ag-cats label { white-space:nowrap; flex:0 0 auto; }
}

/* Glen 10/10/26: four alphabet rows with radios (replaces the dropdown) + the "Your Canvas" heading */
.ag-alphas { border:0; padding:0; margin:8px 0 10px; display:grid; gap:6px; }
.ag-alphas legend { font-weight:600; margin-bottom:4px; }
.ag-alpha-row { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:center; padding:8px 12px; border:1px solid #e6dccb; border-radius:8px; background:#fffdf8; cursor:pointer; }
.ag-alpha-row input { grid-row:1 / span 2; accent-color:#7a1f1f; width:18px; height:18px; }
.ag-alpha-runes { font-family:'Noto Sans Runic','Segoe UI Historic',serif; font-size:1.35rem; color:#7a1f1f; letter-spacing:.06em; line-height:1.2; overflow-wrap:anywhere; }
.ag-alpha-row small { color:#6b5a48; font-size:.8rem; }
.ag-alpha-row:has(input:checked) { border-color:#7a1f1f; background:#fbf3e4; box-shadow:inset 4px 0 0 #7a1f1f; }
.ag-canvas-h { font-family:'Cinzel',Georgia,serif; letter-spacing:.06em; text-align:center; color:#6b1a1f; margin:0 0 8px; }
/* the tool hides radios site-wide (styled cards); these rows show a real radio circle (Glen asked for radio boxes) */
.ag-alpha-row input[type="radio"] { opacity:1 !important; position:static !important; width:18px !important; height:18px !important; margin:0 !important; clip:auto !important; pointer-events:auto; appearance:auto; -webkit-appearance:radio; }
.ag-runes-opts .ag-runes-out { display:none; }   /* the rows already show the runes; the single echo line was a repeat */

/* text-size fine-tune (Glen 10/10/26) */
.ag-tune { display:inline-flex; align-items:center; gap:4px; margin-left:0; }
.ag-sz { margin:10px 0 0; padding:0; border:0; min-width:0; }
.ag-sz[hidden] { display:none; }
#ag-rs-out, #ag-ts-out { min-width:3ch; }
.ag-tune-btn { width:34px; height:34px; border-radius:50%; border:1.5px solid #B8860B; background:#fffaf0; color:#7a1f1f; font:700 1.1rem/1 'IBM Plex Sans',Arial,sans-serif; cursor:pointer; padding:0; }
.ag-tune-btn:hover:not(:disabled), .ag-tune-btn:focus-visible { background:#f3e2b8; }
.ag-tune-btn:disabled { opacity:.35; cursor:default; }
#ag-rs-out, #ag-ts-out { min-width:2ch; text-align:center; font:600 .9rem 'IBM Plex Sans',Arial,sans-serif; color:#6b5a48; }

/* 0.3.0 (ZAT-T147 API build, 10/10/26): product color step, buy-step sizes, shared-link note, the site's Share link and menu */
#asgard-gifts .ag-link-note { background:#fbf3e4; border:1px solid var(--ag-gold-l); border-radius:10px; padding:6px 12px; font-size:.92rem; text-align:center; margin:0 0 14px; }
#asgard-gifts .ag-p-colors { font-size:.78rem; color:var(--ag-muted); }
/* a palette, not a list (Glen 10/10/26): round chips, no labels; the chosen name shows once in the legend and as each chip's tooltip */
#asgard-gifts .ag-pcolor-list { display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
#asgard-gifts .ag-pcolor-list label { position:relative; cursor:pointer; display:block; padding:3px; border-radius:50%; }
#asgard-gifts .ag-pcolor-list input { position:absolute; opacity:0 !important; width:1px; height:1px; }
#asgard-gifts .ag-pcolor-list .ag-sw { display:block; width:40px; height:40px; border-radius:50%; border:1px solid rgba(60,40,20,.35); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }
#asgard-gifts .ag-pcolor-list label:hover .ag-sw { transform:scale(1.08); }
#asgard-gifts .ag-pcolor-list label:has(input:checked) .ag-sw { box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--ag-maroon); }
#asgard-gifts .ag-pcolor-list label:has(input:focus-visible) .ag-sw { outline:2px solid var(--ag-maroon); outline-offset:4px; }
#asgard-gifts .ag-pcolor-list small { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#asgard-gifts .ag-pcolor-list label.ag-off .ag-sw { opacity:.3; }
#asgard-gifts .ag-pcolor-name { text-transform:none; letter-spacing:0; font:600 1rem 'EB Garamond',serif; color:var(--ag-ink); }
#asgard-gifts .ag-buy-sizes label { border:2px solid var(--ag-parch-d); border-radius:999px; padding:5px 14px; background:#fff; }
#asgard-gifts .ag-buy-size-list { display:flex; flex-wrap:wrap; gap:6px; }
#asgard-gifts .ag-buy-sizes label:has(input:checked) { border-color:var(--ag-maroon); background:#fbf1f1; color:var(--ag-maroon); font-weight:600; }
/* Share link and menu: the style guide's ".share-quiet + .share-panel" (same rules as runes.css, scoped here) */
#asgard-gifts .ag-share { text-align:center; margin-top:10px; }
#asgard-gifts .share-quiet { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 8px; background:none !important; border:0 !important; box-shadow:none !important; color:#7a1f1f !important; font:700 .95rem/1.2 'IBM Plex Sans','Open Sans',Arial,sans-serif !important; text-decoration:underline; text-underline-offset:4px; cursor:pointer; text-transform:none; letter-spacing:0; }
#asgard-gifts .share-quiet:hover, #asgard-gifts .share-quiet:focus-visible { color:#8a2428 !important; }
#asgard-gifts .share-quiet svg, #asgard-gifts .share-panel svg { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#asgard-gifts .share-panel { display:block; width:min(300px,100%); margin:10px auto 0; background:#fffdf8; border:1px solid #e2d5bd; border-radius:8px; box-shadow:0 8px 22px rgba(43,29,20,.16); text-align:left; overflow:hidden; padding:0; }
#asgard-gifts .share-panel button { display:flex !important; align-items:center; gap:12px; width:100%; min-height:44px; margin:0; padding:10px 14px !important; background:none !important; border:0 !important; border-top:1px solid #f0e6d3 !important; border-radius:0 !important; box-shadow:none !important; color:#2b1d14 !important; font:500 .95rem/1.2 'IBM Plex Sans','Open Sans',Arial,sans-serif !important; text-transform:none !important; letter-spacing:0 !important; text-align:left; cursor:pointer; }
#asgard-gifts .share-panel button:first-child { border-top:0 !important; }
#asgard-gifts .share-panel button:hover, #asgard-gifts .share-panel button:focus-visible { background:#f6ecd4 !important; color:#7a1f1f !important; box-shadow:inset 4px 0 0 #7a1f1f !important; }
#asgard-gifts .ag-share-msg { font-size:.88rem; color:var(--ag-muted); margin:4px 0 0; min-height:0; }
#asgard-gifts .ag-share-msg:empty { display:none; }
@media (max-width: 860px) { #asgard-gifts .ag-preview .ag-share { display:none; } }   /* phones: the sticky preview stays small; Share sits on the result card */

/* 0.4.0 (ZAT-T147 phase 2): cart bar + drawer, Add to cart, Design another, notify-me waitlist */
#asgard-gifts .ag-cartbar { position:sticky; top:8px; z-index:20; display:flex; justify-content:flex-end; margin:0 0 6px; pointer-events:none; }
#asgard-gifts .ag-cart-open { pointer-events:auto; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border:1.5px solid var(--ag-gold-l); border-radius:999px; background:#fffaf0; color:var(--ag-maroon); font:700 .95rem/1 'IBM Plex Sans',Arial,sans-serif; cursor:pointer; box-shadow:0 2px 8px rgba(43,29,20,.12); }
#asgard-gifts .ag-cart-open svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#asgard-gifts .ag-cart-n { min-width:1.6em; padding:2px 6px; border-radius:999px; background:var(--ag-maroon); color:#fff; font-size:.8rem; text-align:center; }
#asgard-gifts .ag-cart { position:fixed; top:0; right:0; bottom:0; z-index:100000; width:min(420px,100vw); overflow:auto; background:#fffdf8; border-left:1px solid #e2d5bd; box-shadow:-10px 0 30px rgba(43,29,20,.2); padding:18px; }
#asgard-gifts .ag-cart-head { display:flex; justify-content:space-between; align-items:center; }
#asgard-gifts .ag-cart-head h3 { margin:0; }
#asgard-gifts .ag-cart-lines { list-style:none; margin:12px 0; padding:0; }
#asgard-gifts .ag-cart-lines li { display:grid; grid-template-columns:64px 1fr auto; grid-template-areas:"img txt price" "img rm rm"; gap:4px 10px; padding:10px 0; border-top:1px solid #f0e6d3; align-items:start; }
#asgard-gifts .ag-cart-lines img { grid-area:img; width:64px; height:64px; object-fit:contain; background:#fff; border:1px solid #eadfca; border-radius:6px; }
#asgard-gifts .ag-cart-lines div { grid-area:txt; font-size:.92rem; }
#asgard-gifts .ag-cart-lines small { color:var(--ag-muted); }
#asgard-gifts .ag-cart-price { grid-area:price; font-weight:600; white-space:nowrap; }
#asgard-gifts .ag-cart-rm { grid-area:rm; justify-self:start; font-size:.85rem; }
#asgard-gifts .ag-cart-sub { font-weight:600; margin:6px 0; }
#asgard-gifts .ag-cart-note, #asgard-gifts .ag-proof { font-size:.88rem; color:var(--ag-muted); }
#asgard-gifts .ag-checkout { width:100%; }
#asgard-gifts .ag-added { text-align:center; margin:6px 0 0; }
#asgard-gifts .ag-wl { margin-top:8px; padding:14px; border:1px solid var(--ag-gold-l); border-radius:10px; background:#fbf6ea; text-align:left; }
#asgard-gifts .ag-wl h4 { margin:0 0 4px; }
#asgard-gifts .ag-wl-lede { margin:0 0 10px; font-size:.95rem; }
#asgard-gifts .ag-wl input[type="email"] { width:100%; min-height:44px; margin:4px 0 8px; }
#asgard-gifts .ag-wl .ag-check { display:flex; gap:8px; align-items:flex-start; font-size:.92rem; margin:6px 0; }
#asgard-gifts .ag-wl .cf-turnstile { margin:8px 0; }
#asgard-gifts .ag-wl textarea { width:100%; margin:4px 0 8px; font:inherit; font-size:.95rem; resize:vertical; }
#asgard-gifts .ag-wl-comment-l { display:block; font-size:.92rem; }
#asgard-gifts .ag-wl .ag-opt { color:#6b5a4a; font-weight:400; }
#asgard-gifts .ag-wl-btn { width:100%; margin-top:6px; }
#asgard-gifts .ag-wl-ok { color:#2f5d3a; font-weight:600; }
#asgard-gifts .ag-hp { position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
#asgard-gifts .ag-wl-note { background:#eef6ee; border:1px solid #9fc79f; border-radius:10px; padding:6px 12px; font-size:.95rem; text-align:center; margin:0 0 14px; }

/* style choices without words (Glen 10/11/26) */
#asgard-gifts fieldset.ag-inactive { opacity:.4; filter:grayscale(1); }
#asgard-gifts fieldset.ag-inactive label, #asgard-gifts fieldset.ag-inactive button { cursor:not-allowed; }
#asgard-gifts .ag-nowords { margin:6px 0 10px; padding:8px 12px; border-left:3px solid var(--ag-gold, #b8860b); background:#fbf6ea; font:italic .95rem 'EB Garamond',serif; color:var(--ag-ink); }

/* Glen 10/11/26: the Odin's Offerings plate (the order-email mark) REPLACES the page title under the menu, and no breadcrumbs here.
   The H1 keeps its text for search and screen readers (font-size 0); the plate is its background. Scoped to the page that holds the
   designer, so the shortcode anywhere else changes nothing. */
body:has(#asgard-gifts) .site-breadcrumbs-p { display:none; }
body:has(#asgard-gifts) h1.page-title { font-size:0; line-height:0; color:transparent; width:460px; max-width:100%; aspect-ratio:1200/229;
  background:url(odins-offerings-plate-600.png) left center / contain no-repeat;
  background-image:image-set(url(odins-offerings-plate-600.png) 1x, url(odins-offerings-plate.png) 2x); margin:4px 0 22px; }
@media (max-width: 600px) { body:has(#asgard-gifts) h1.page-title { width:300px; } }

/* 0.5.0 (ZAT-T147 phase 3, Glen 10/11/26): product first, the palette under the chosen product, a finished design to start from,
   one-line adjust notes, the optional fine-tune skip, three ways on, the editors' link builder */
#asgard-gifts .ag-products { grid-auto-flow:row dense; }   /* the palette (full row) lands right under the chosen product's row */
#asgard-gifts .ag-products .ag-pcolors { grid-column:1/-1; margin:0; padding:12px 14px; border:2px solid var(--ag-maroon); border-radius:12px; background:#fffaf0; }
#asgard-gifts .ag-products .ag-pcolor-hint { margin:8px 0 0; }
#asgard-gifts .ag-greet-kicker { display:block; font:700 .78rem 'Cinzel',serif; letter-spacing:.14em; text-transform:uppercase; color:var(--ag-gold); }
#asgard-gifts .ag-greet img[data-noimg], #asgard-gifts .ag-products img[data-noimg] { background:var(--ag-parch); border-radius:10px; }
#asgard-gifts .ag-starter { margin:8px 0 0; font-size:.9rem; font-style:italic; color:var(--ag-muted); text-align:center; }
#asgard-gifts .ag-adjust { margin:12px 0 0; padding:8px 12px; border-left:3px solid var(--ag-gold); background:#fbf6ea; font-size:.95rem; color:var(--ag-ink); }
#asgard-gifts .ag-opt { text-transform:none; letter-spacing:0; font:italic .9em 'EB Garamond',serif; color:var(--ag-muted); }
#asgard-gifts .ag-skip-row { margin:10px 0 0; text-align:right; }
#asgard-gifts .ag-skip { font-weight:600; }
#asgard-gifts .ag-linkstep-row { margin:14px 0 0; padding-top:10px; border-top:1px dashed var(--ag-gold); font-size:.88rem; color:var(--ag-muted); }
#asgard-gifts .ag-linkstep-msg { overflow-wrap:anywhere; }
#asgard-gifts .ag-r-links { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
#asgard-gifts .ag-r-links .ag-btn { margin:0; width:100%; }
#asgard-gifts .ag-r-links .ag-fresh { align-self:center; margin-top:2px; }
@media (max-width: 860px) {
  #asgard-gifts .ag-skip-row { text-align:center; }
  #asgard-gifts .ag-starter { display:none; }   /* the pinned phone preview stays small */
}
/* the palette sits inside the product grid: keep the product-card look off its chips */
#asgard-gifts .ag-products .ag-pcolor-list label { border:0 !important; background:none !important; box-shadow:none !important; gap:0; padding:3px; }

/* the blank's description on the result card (Glen 10/11/26) */
#asgard-gifts .ag-desc { margin:4px 0 2px; padding:10px 0 0; border-top:1px solid var(--ag-parch-d); font-size:.96rem; }
#asgard-gifts .ag-desc-lead { margin:0 0 6px; }
#asgard-gifts .ag-desc-facts { margin:0 0 6px 1.1em; padding:0; }
#asgard-gifts .ag-desc-facts li { margin:0 0 2px; }
#asgard-gifts .ag-desc-care { margin:0 0 6px; font-style:italic; color:#6b5a47; }
#asgard-gifts .ag-desc-note { margin:0; font-size:.9rem; color:#6b5a47; }
/* 0.9.0 wrap borders + background (wraparound products only) */
#asgard-gifts .ag-backs { display:flex; flex-wrap:wrap; gap:12px; }
#asgard-gifts .ag-backs legend, #asgard-gifts .ag-borders legend { width:100%; }
#asgard-gifts .ag-backs label { position:relative; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; width:74px; text-transform:none; letter-spacing:0; font:1rem 'EB Garamond',serif; color:var(--ag-ink); }
#asgard-gifts .ag-backs small, #asgard-gifts .ag-borders small { font-size:.72rem; color:var(--ag-muted); text-align:center; }
#asgard-gifts .ag-backs label:has(input:checked) .ag-sw { box-shadow:0 0 0 3px var(--ag-maroon); }
#asgard-gifts .ag-sw-none { background:repeating-linear-gradient(45deg,#fff 0 6px,#e9e1d1 6px 12px); }
#asgard-gifts .ag-borders { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
#asgard-gifts .ag-borders legend { grid-column:1/-1; }
#asgard-gifts .ag-borders label { position:relative; cursor:pointer; border:2px solid var(--ag-parch-d); border-radius:12px; padding:6px; display:flex; flex-direction:column; gap:4px; text-transform:none; letter-spacing:0; font:1rem 'EB Garamond',serif; }
#asgard-gifts .ag-borders label:has(input:checked) { border-color:var(--ag-maroon); box-shadow:0 0 0 2px var(--ag-maroon) inset; }
#asgard-gifts .ag-band { display:flex; align-items:center; justify-content:center; height:30px; border-radius:6px; background-repeat:repeat-x; background-size:auto 100%; background-position:center; font-size:.8rem; border:1px solid rgba(60,40,20,.2); }
@media (max-width: 860px) { #asgard-gifts .ag-borders { grid-template-columns:repeat(2,minmax(0,1fr)); } #asgard-gifts .ag-backs { gap:8px; } #asgard-gifts .ag-backs label { width:64px; } }

/* ---- 0.10.0 (Glen 10/15/26): text mode is one four-way choice; the name box and its label go quiet when "No text or runes" is chosen */
#asgard-gifts label.ag-inactive { opacity:.45; }
#asgard-gifts .ag-seg label:has(input:disabled) { opacity:.45; cursor:not-allowed; }
#asgard-gifts .ag-first { margin-top:4px; }

/* ---- 0.10.1 (Glen 10/15/26): what was chosen shows under each tab, so any step shows the others; the canvas is smaller */
#asgard-gifts .ag-progress { align-items:flex-start; }
#asgard-gifts .ag-tabsum { display:flex; align-items:center; justify-content:center; gap:8px; min-height:42px; margin-top:6px; padding:0 6px; text-align:center; font:.86rem/1.2 'EB Garamond',serif; color:var(--ag-ink); }
#asgard-gifts .ag-tabsum img { width:36px; height:36px; object-fit:contain; border-radius:6px; border:1px solid var(--ag-parch-d); background:#fff; flex:0 0 auto; }
#asgard-gifts .ag-tabsum .ag-sum-t, #asgard-gifts .ag-tabsum .ag-sum-notes { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-align:left; min-width:0; }
#asgard-gifts .ag-tabsum .ag-sum-notes { text-align:center; font-size:.8rem; color:var(--ag-muted); }
#asgard-gifts .ag-tabsum .ag-sum-name { font-weight:700; font-size:1.02rem; color:var(--ag-maroon); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
#asgard-gifts .ag-tabsum .ag-sum-runes { font-family:'Noto Sans Runic','Segoe UI Historic',serif; font-size:.95rem; color:var(--ag-muted); letter-spacing:.04em; white-space:nowrap; }
#asgard-gifts .ag-tabsum[data-sum="words"] { flex-direction:column; gap:0; }
#asgard-gifts .ag-tabsum .ag-sum-none { color:var(--ag-muted); font-style:italic; }
#asgard-gifts .ag-progress li.is-on .ag-tabsum { color:var(--ag-maroon); }
/* the canvas: smaller, so the steps and the tabs fit on the screen with it */
@media (min-width: 861px) { #asgard-gifts .ag-grid { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:18px; } }
#asgard-gifts .ag-preview { padding:14px 16px; }
@media (max-width: 860px) { #asgard-gifts .ag-preview { padding:8px 10px 6px; } }
#asgard-gifts .ag-canvas-h { font-size:1.1rem; margin:0 0 6px; }
@media (max-width: 860px) {
  #asgard-gifts .ag-tabsum { min-height:30px; gap:3px; margin-top:3px; padding:0 1px; font-size:.62rem; flex-direction:column; }
  #asgard-gifts .ag-tabsum img { width:26px; height:26px; }
  #asgard-gifts .ag-tabsum .ag-sum-t, #asgard-gifts .ag-tabsum .ag-sum-notes { -webkit-line-clamp:2; text-align:center; font-size:.62rem; line-height:1.1; }
  #asgard-gifts .ag-tabsum .ag-sum-name { font-size:.72rem; }
  #asgard-gifts .ag-tabsum .ag-sum-runes { font-size:.65rem; }
}
/* the canvas never grows taller than ~44% of the screen: tall gifts (a tee, a poster) get a narrower frame instead of a tall one */
#asgard-gifts .ag-frame { width:min(100%, calc(44vh * var(--ag-aspect, 1.2857)), 600px); margin-left:auto; margin-right:auto; }   /* 0.22.11 (Glen 10/20/26): hard 600 px cap, so zooming out (a taller viewport) cannot keep growing the picture */
@media (max-width: 860px) { #asgard-gifts .ag-frame { width:min(100%, calc(32vh * var(--ag-aspect, 1.2857))); } }

/* ---- 0.10.2 (Glen 10/15/26): the whole tool fits the screen. Desktop: the steps card is as tall as the window allows, scrolls inside itself when a
   step is long (art, color palettes), and keeps Back / Next in view at its foot; everything is compacted so the common steps need no scrolling. */
#asgard-gifts .ag-first .ag-first-hint { font:italic .85rem 'EB Garamond',serif; letter-spacing:0; text-transform:none; margin-left:8px; color:var(--ag-muted); }
#asgard-gifts .ag-first { margin-top:8px; }
#asgard-gifts .ag-first label { padding:4px 18px; }
@media (min-width: 861px) {
  #asgard-gifts { font-size:16px; line-height:1.45; }
  #asgard-gifts .ag-progress { margin-bottom:10px; }
  #asgard-gifts .ag-progress button { padding:7px 10px; font-size:.78rem; }
  #asgard-gifts .ag-tabsum { min-height:38px; margin-top:4px; }
  #asgard-gifts .ag-steps { padding:14px 18px 0; max-height:min(calc(100vh - 118px), 700px); /* 0.22.11 (Glen 10/20/26): never taller than 700 px, however far the browser is zoomed out */ overflow-y:auto; display:flex; flex-direction:column; scrollbar-width:thin; }
  #asgard-gifts .ag-steps > * { flex:0 0 auto; }
  #asgard-gifts .ag-navwrap { position:sticky; bottom:0; z-index:3; margin-top:auto; background:#fff; border-top:1px solid var(--ag-parch-d); padding:8px 0 10px; }
  #asgard-gifts .ag-nav { margin-top:0; }
  #asgard-gifts .ag-btn { padding:9px 22px; font-size:.95rem; }
  #asgard-gifts .ag-skip-row { margin:6px 0 0; }
  #asgard-gifts .ag-linkstep-row { margin:8px 0 10px; padding-top:6px; }
  #asgard-gifts .ag-step h3 { font-size:1.15rem; margin-bottom:.25em; }
  #asgard-gifts .ag-sub { font-size:.85rem; margin:2px 0 0; }
  #asgard-gifts fieldset { margin-top:9px; }
  #asgard-gifts legend { margin-bottom:4px; }
  #asgard-gifts #ag-text { font-size:1.15rem; padding:8px 12px; }
  #asgard-gifts .ag-count { margin:0; }
  #asgard-gifts .ag-seg { gap:6px; }
  #asgard-gifts .ag-seg label { padding:5px 13px; font-size:.95rem; }
  #asgard-gifts .ag-alphas { grid-template-columns:repeat(2,minmax(0,1fr)); margin:6px 0 4px; gap:6px; }
  #asgard-gifts .ag-alphas legend { grid-column:1/-1; margin-bottom:0; }
  #asgard-gifts .ag-alpha-row { padding:5px 9px; column-gap:8px; }
  #asgard-gifts .ag-alpha-runes { font-size:1.1rem; }
  #asgard-gifts .ag-hint { font-size:.82rem; margin:2px 0 0; }
  #asgard-gifts .ag-ideas { margin-top:4px; }
  #asgard-gifts .ag-idea { min-height:26px; padding:1px 10px; font-size:.85rem; }
  #asgard-gifts .ag-fonts label { padding:5px 4px; }
  #asgard-gifts .ag-fonts span { font-size:1.2rem; }
  #asgard-gifts .ag-colors { gap:8px; }
  #asgard-gifts .ag-colors label { width:66px; }
  #asgard-gifts .ag-sw { width:30px; height:30px; }
  #asgard-gifts .ag-art { grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:8px; margin-top:6px; }
  #asgard-gifts .ag-art img, #asgard-gifts .ag-art-box { width:72px; height:72px; }
  #asgard-gifts .ag-art label, #asgard-gifts .ag-products label { padding:6px; }
  #asgard-gifts .ag-products { grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:8px; }
  #asgard-gifts .ag-products img { width:84px; height:84px; }
  #asgard-gifts .ag-p-name { font-size:.85rem; }
  #asgard-gifts .ag-p-price { font-size:.8rem; }
  #asgard-gifts .ag-preview .ag-note { font-size:.78rem; margin:4px 0 0; }
  #asgard-gifts .ag-on { margin-top:8px; padding:6px 8px; }
  #asgard-gifts .ag-on img { width:44px; height:44px; }
  #asgard-gifts .ag-preview { top:8px; }
  #asgard-gifts .ag-starter { margin:4px 0 0; font-size:.85rem; }
  #asgard-gifts .ag-share { margin-top:4px; }
}
@media (min-width: 861px) and (max-height: 820px) {
  #asgard-gifts .ag-art img, #asgard-gifts .ag-art-box { width:64px; height:64px; }
}
@media (min-width: 861px) {
  #asgard-gifts .ag-backs { gap:6px; }
  #asgard-gifts .ag-backs label { width:68px; }
  #asgard-gifts .ag-borders { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
  #asgard-gifts .ag-band { height:24px; }
  #asgard-gifts .ag-borders label { padding:4px; }
}
@media (max-width: 860px) {
  #asgard-gifts .ag-frame { width:min(100%, calc(27vh * var(--ag-aspect, 1.2857))); }
  #asgard-gifts { font-size:16px; }
  #asgard-gifts .ag-seg label { padding:5px 12px; }
  #asgard-gifts .ag-steps, #asgard-gifts .ag-result { padding:14px; }
}

/* ---- 0.11.0 (Glen 10/15/26): category dropdown first, then up to 12 gifts with a pager */
#asgard-gifts .ag-pcat-row { display:flex; align-items:center; gap:10px; margin:8px 0 6px; }
#asgard-gifts .ag-pcat-row label { margin:0; white-space:nowrap; }
#asgard-gifts .ag-pcat-row select { margin:0; flex:1 1 auto; max-width:380px; padding:7px 10px; }
#asgard-gifts .ag-pager { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; margin:10px 0 2px; }
#asgard-gifts .ag-pager button { min-width:34px; height:34px; border-radius:999px; border:1.5px solid var(--ag-parch-d); background:#fff; color:var(--ag-maroon); font:600 .9rem 'EB Garamond',serif; cursor:pointer; padding:0 8px; }
#asgard-gifts .ag-pager button[aria-current="true"] { background:var(--ag-maroon); border-color:var(--ag-maroon); color:#fff; }
#asgard-gifts .ag-pager button[disabled] { opacity:.4; cursor:not-allowed; }
#asgard-gifts .ag-pg-dots { display:inline-flex; gap:6px; }
#asgard-gifts .ag-pg-status { flex-basis:100%; text-align:center; font-size:.8rem; color:var(--ag-muted); }
@media (max-width: 860px) {
  #asgard-gifts .ag-products { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  #asgard-gifts .ag-products img { width:72px; height:72px; }
  #asgard-gifts .ag-products label { padding:6px 4px; }
  #asgard-gifts .ag-p-name { font-size:.78rem; } #asgard-gifts .ag-p-price { font-size:.7rem; } #asgard-gifts .ag-p-colors { font-size:.68rem; }
  #asgard-gifts .ag-pcat-row select { max-width:none; }
}
#asgard-gifts .ag-products .ag-pcolors legend { float:left; width:100%; margin:0 0 8px; padding:0; }
#asgard-gifts .ag-products .ag-pcolors .ag-pcolor-list { clear:both; }

/* ---- 0.12.0 (Glen 10/15/26): a quiet "border or circle around my design" line under the artwork picker */
#asgard-gifts .ag-frameopt { margin-top:14px; padding-top:10px; border-top:1px dashed var(--ag-parch-d); }
#asgard-gifts .ag-frame-check { font-size:.95rem; }
#asgard-gifts .ag-frame-check input { position:static; opacity:1; width:18px; height:18px; accent-color:var(--ag-maroon); }
#asgard-gifts .ag-frames { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
#asgard-gifts .ag-frames legend { width:100%; }
#asgard-gifts .ag-frames label { cursor:pointer; border:2px solid var(--ag-parch-d); border-radius:12px; padding:6px; display:flex; flex-direction:column; align-items:center; gap:3px; width:104px; text-transform:none; letter-spacing:0; font:1rem 'EB Garamond',serif; }
#asgard-gifts .ag-frames label:has(input:checked) { border-color:var(--ag-maroon); box-shadow:0 0 0 2px var(--ag-maroon) inset; }
#asgard-gifts .ag-frame-sw { display:grid; place-items:center; width:72px; height:72px; background:#fff; border-radius:8px; }
#asgard-gifts .ag-frames small { font-size:.72rem; color:var(--ag-muted); text-align:center; line-height:1.15; }
#asgard-gifts .ag-frames .ag-hint { flex-basis:100%; margin:2px 0 0; }
/* 0.19.0 cut products: backing shape + backing color (W23), ONE compact row so step 3 never scrolls inside (0.17.7 rule) */
#asgard-gifts .ag-cutopt { margin-top:10px; padding-top:8px; border-top:1px dashed var(--ag-parch-d); display:flex; flex-wrap:wrap; gap:6px 22px; align-items:flex-start; }
#asgard-gifts .ag-cutopt[hidden] { display:none; }
#asgard-gifts .ag-cuts, #asgard-gifts .ag-cbacks { display:flex; flex-wrap:wrap; gap:5px; margin:0; border:0; padding:0; min-width:0; }
#asgard-gifts .ag-cuts legend, #asgard-gifts .ag-cbacks legend { width:100%; margin-bottom:3px; }
#asgard-gifts .ag-cuts label, #asgard-gifts .ag-cbacks label { position:relative; cursor:pointer; border:2px solid var(--ag-parch-d); border-radius:10px; padding:4px; display:flex; flex-direction:column; align-items:center; gap:2px; text-transform:none; letter-spacing:0; font:1rem 'EB Garamond',serif; }
#asgard-gifts .ag-cuts label { width:62px; } #asgard-gifts .ag-cbacks label { padding:3px; border-radius:50%; }
#asgard-gifts .ag-cuts label[hidden], #asgard-gifts .ag-cbacks label[hidden] { display:none; }
#asgard-gifts .ag-cuts label:has(input:checked), #asgard-gifts .ag-cbacks label:has(input:checked) { border-color:var(--ag-maroon); box-shadow:0 0 0 2px var(--ag-maroon) inset; }
#asgard-gifts .ag-cuts input, #asgard-gifts .ag-cbacks input { position:absolute; opacity:0; width:1px; height:1px; }
#asgard-gifts .ag-cut-sw { display:block; width:30px; height:30px; background:var(--ag-navy, #1d2b45); }
#asgard-gifts .ag-cut-plaque .ag-cut-sw { border-radius:6px; width:26px; height:32px; }
#asgard-gifts .ag-cut-round .ag-cut-sw { border-radius:50%; }
#asgard-gifts .ag-cut-shield .ag-cut-sw { width:26px; height:32px; clip-path:path('M2 0 H24 L26 2 V17 Q26 27 13 32 Q0 27 0 17 V2 Z'); }
#asgard-gifts .ag-cb-sw { display:block; width:26px; height:26px; border-radius:50%; border:1px solid rgba(0,0,0,.25); }
#asgard-gifts .ag-cuts small { font-size:.68rem; color:var(--ag-muted); text-align:center; line-height:1.1; }
#asgard-gifts .ag-cbacks small { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#asgard-gifts .ag-cbacks .ag-hint { flex-basis:100%; margin:2px 0 0; font-size:.8rem; }

/* ONE artwork-color choice (0.13.1, Glen 10/15/26): a segmented row in Fine-tune; a greyed option is one that would be hard to see on this color */
#asgard-gifts .ag-artcolor { margin:12px 0 0; min-width:0; }
#asgard-gifts .ag-artcolor label small { font-size:.78rem; color:var(--ag-muted); font-weight:400; margin-left:2px; }
#asgard-gifts .ag-artcolor .ag-tone-note { flex-basis:100%; font-size:.85rem; color:var(--ag-muted); }
#asgard-gifts .ag-artcolor .ag-tone-note:empty { display:none; }

/* hide the text / hide the runes (0.13.2): two small what-if switches at the top of Fine-tune */
#asgard-gifts .ag-hide { border:0; padding:0; margin:10px 0 0; min-width:0; display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; }
#asgard-gifts .ag-hide legend { width:100%; }
#asgard-gifts .ag-hide label { display:inline-flex; gap:8px; align-items:center; cursor:pointer; font:1rem/1.4 'EB Garamond',serif; color:var(--ag-ink); text-transform:none; letter-spacing:0; }
#asgard-gifts .ag-hide small { flex-basis:100%; color:var(--ag-muted); font-size:.82rem; }
#asgard-gifts .ag-empty { text-align:center; padding:0 18px; }

/* border size and ring size (0.13.4): the same - / + as the text sizes; the ring's sits under its picker */
#asgard-gifts .ag-sz-ring { display:flex; align-items:center; gap:12px; margin:8px 0 0; }
#asgard-gifts .ag-sz-legend { font:600 .82rem 'Cinzel',serif; letter-spacing:.08em; text-transform:uppercase; color:var(--ag-muted); }

/* 0.13.6 Product color row on Fine-tune: compact, one line of chips */
#asgard-gifts .ag-fcolor { margin:0 0 8px; padding:0; border:0; }
#asgard-gifts .ag-fcolor legend { float:left; margin:0 12px 0 0; padding:0; line-height:34px; }
#asgard-gifts .ag-fcolor .ag-pcolor-list { margin:0; gap:6px; align-items:center; }
#asgard-gifts .ag-fcolor .ag-pcolor-list .ag-sw { width:30px; height:30px; }

/* ---- 0.15.0 THE STEPS IN THE HEADER (Glen 10/16-17/26): on the Rune Forge page the four steps sit INSIDE the D5 header, between "The Rune Forge"
   and the buttons (0.14.0 had them as a separate band under the header). Each step is a compact panel: the name as typed + its runes, the product
   picture, the artwork picture on the product color, the fine-tune notes. The whole panel is the step button; it works before "Make it mine" too.
   The list is printed by the D5 template (asgard-landing-d5/template.php) from the designer's own markup; gifts.js reaches it through STEPS.
   Elsewhere (no forge chrome) the list stays inside the designer, keeps its pill look, and is hidden until the designer is open. */
#asgard-gifts:not(.ag-open) .ag-progress { display:none; }
.cc-h7.rf-h-steps .m { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:22px; height:auto; min-height:70px; padding-top:8px; padding-bottom:8px; flex-wrap:nowrap; }
.cc-h7 .rf-h1n { margin:0; padding:0; font:inherit; line-height:1.1; color:inherit; letter-spacing:inherit; text-transform:none; }   /* the page's one H1; looks exactly like the old wordmark */
.cc-h7 .rf-h1n a { color:inherit; text-decoration:none; }
.rf-h-steps .ag-progress { list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch; gap:0; margin:0; padding:0; min-width:0; }
.rf-h-steps .ag-progress li { position:relative; display:flex; flex-direction:column; min-width:0; margin:0; padding:6px 10px 7px; border-radius:8px; transition:background .15s; }
.rf-h-steps .ag-progress li[hidden] { display:none; }
.rf-h-steps .ag-progress li + li::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:1px; background:rgba(217,178,90,.28); }
.rf-h-steps .ag-progress li:hover { background:rgba(246,239,226,.07); }
.rf-h-steps .ag-progress button { display:flex; align-items:center; gap:7px; width:auto; margin:0; padding:0; min-height:0; border:0; border-radius:0; background:none; cursor:pointer;
  color:#f6efe2; font:600 15px/1.15 'Cormorant Garamond',Georgia,serif; letter-spacing:.02em; text-transform:none; text-align:left; white-space:nowrap; }
.rf-h-steps .ag-progress button::after { content:""; position:absolute; inset:0; border-radius:8px; }   /* the whole panel is the button */
.rf-h-steps .ag-progress button:focus-visible { outline:none; }
.rf-h-steps .ag-progress button:focus-visible::after { outline:2px solid #e7c873; outline-offset:-2px; }
.rf-h-steps .ag-progress b { display:inline-grid; place-items:center; width:20px; height:20px; flex:0 0 20px; border-radius:50%; border:1.5px solid #d9b25a; color:#e7c873; font:700 11px 'Lato',system-ui,sans-serif; }
.rf-h-steps .ag-progress li.is-done b { background:rgba(217,178,90,.22); }
.rf-h-steps .ag-progress.is-open li.is-on { background:rgba(246,239,226,.11); box-shadow:inset 0 2px 0 #e7c873; }
.rf-h-steps .ag-progress.is-open li.is-on button { color:#e7c873; }
.rf-h-steps .ag-progress.is-open li.is-on b { background:#e7c873; border-color:#e7c873; color:#1a2240; }
.rf-h-steps .ag-tabsum { display:flex; flex:1 1 auto; align-items:center; gap:8px; min-height:46px; margin:5px 0 0; padding:0; text-align:left; pointer-events:none;
  font:400 12px/1.25 'Lato',system-ui,sans-serif; color:#e9e4d8; }
.rf-h-steps .ag-tabsum img { width:46px; height:46px; flex:0 0 46px; border-radius:7px; border:1px solid rgba(217,178,90,.55); background:#fff; object-fit:contain; }
.rf-h-steps .ag-tabsum .ag-sum-t { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-width:0; font-weight:700; }
.rf-h-steps .ag-tabsum[data-sum="words"] { flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; }
.rf-h-steps .ag-tabsum .ag-sum-name { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 21px/1.1 'Cormorant Garamond',Georgia,serif; color:#f6efe2; }
.rf-h-steps .ag-tabsum .ag-sum-runes { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:13px 'Noto Sans Runic','Segoe UI Historic',serif; color:#e7c873; letter-spacing:.06em; }
.rf-h-steps .ag-tabsum .ag-sum-none { color:#aab1cf; font-style:italic; }
.rf-h-steps .ag-tabsum .ag-sum-notes { display:flex; flex-direction:column; gap:1px; min-width:0; }
.rf-h-steps .ag-tabsum .ag-sum-sep { display:none; }
.rf-h-steps .ag-tabsum .ag-sum-note { display:block; position:relative; padding-left:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rf-h-steps .ag-tabsum .ag-sum-note::before { content:"\2726"; position:absolute; left:0; top:.15em; font-size:.75em; color:#d9b25a; }
.rf-h-steps .ag-tabsum .ag-sum-note:nth-child(n+7) { display:none; }   /* three notes (the hidden separators are children too: note k is child 2k-1) */
.rf-h-steps .ag-tabsum .ag-sum-art + .ag-sum-t + .ag-sum-notes { display:none; }   /* "in a border" note: the art panel has no room for it in the header */
/* narrower desktops: the steps take their own row inside the header */
@media (max-width: 1180px) {
  .cc-h7.rf-h-steps .m { grid-template-columns:auto auto; justify-content:space-between; row-gap:6px; }
  .rf-h-steps .ag-progress { grid-column:1 / -1; order:3; }
}
@media (max-width: 780px) {
  .cc-h7.rf-h-steps .m { grid-template-columns:minmax(0,1fr) auto; padding:8px 10px 8px; gap:8px; }
  .cc-h7.rf-h-steps .wm { min-width:0; }
  .cc-h7.rf-h-steps .cc-wm { font-size:16px; letter-spacing:.1em; }
  .cc-h7.rf-h-steps .s { font-size:11px; }
  .cc-h7.rf-h-steps nav { gap:6px; flex-wrap:nowrap; }
  .cc-h7.rf-h-steps nav a { white-space:nowrap; font-size:10.5px; }
  .cc-h7.rf-h-steps nav a.rf-back { padding:5px 8px; font-size:10.5px; letter-spacing:.04em; }
  .cc-h7.rf-h-steps nav .cc-cart { padding:5px 9px; }
  .rf-h-steps .ag-progress li { align-items:center; padding:5px 3px 6px; }
  .rf-h-steps .ag-progress button { flex-direction:column; gap:2px; font:700 10px/1.1 'Lato',system-ui,sans-serif; letter-spacing:.05em; text-transform:uppercase; text-align:center; }
  .rf-h-steps .ag-progress b { width:18px; height:18px; flex-basis:18px; font-size:10px; }
  .rf-h-steps .ag-tabsum, .rf-h-steps .ag-tabsum[data-sum="words"] { flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:0; margin-top:4px; text-align:center; font-size:10.5px; line-height:1.15; }
  .rf-h-steps .ag-tabsum img { width:42px; height:42px; flex-basis:42px; }
  .rf-h-steps .ag-tabsum .ag-sum-t { -webkit-line-clamp:2; font-weight:400; text-align:center; }
  .rf-h-steps .ag-tabsum .ag-sum-name { font-size:15px; white-space:normal; overflow-wrap:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-align:center; }
  .rf-h-steps .ag-tabsum .ag-sum-runes { font-size:10px; letter-spacing:.02em; }
  .rf-h-steps .ag-tabsum .ag-sum-notes { align-items:center; }
  .rf-h-steps .ag-tabsum .ag-sum-note { padding-left:0; max-width:100%; }
  .rf-h-steps .ag-tabsum .ag-sum-note::before { content:none; }
  .rf-h-steps .ag-tabsum .ag-sum-note:nth-child(n+5) { display:none; }
}
body.asgard-d5-forge #asgard-gifts.ag-open .ag-entry { display:none; }   /* the header steps carry what the slim "A Viking gift..." bar said */

/* ---- 0.15.0 FIT THE SCREEN (Glen 10/17/26: "the tool must fit ENTIRELY above the fold"): Rune Forge page, desktop width. The designer is as tall as
   the room left under the header (--ag-fit, set by gifts.js), the preview and the steps sit side by side inside it, the step title lives in the header
   (the card keeps it for screen readers), Fine-tune is two columns, the artwork is paged. The steps card scrolls inside only as a last resort. */
.ag-art label.ag-pg-off { display:none !important; }
.ag-apager { display:flex; align-items:center; justify-content:center; gap:10px; margin:8px 0 0; }
.ag-apager[hidden] { display:none; }
.ag-apager button { min-width:34px; height:30px; border-radius:999px; border:1.5px solid var(--ag-parch-d,#e2d5bd); background:#fff; color:var(--ag-maroon,#7a1f1f); font:600 1.1rem/1 'EB Garamond',serif; cursor:pointer; padding:0 10px; }
.ag-apager button[disabled] { opacity:.35; cursor:not-allowed; }
.ag-apg-status { font-size:.8rem; color:var(--ag-muted,#6b5a48); }
@media (min-width: 861px) {
  body.asgard-d5-forge .rf-forge-in { padding-top:10px; padding-bottom:16px; }
  body.asgard-d5-forge #asgard-gifts .ag-proto { margin:0 0 8px; padding:3px 10px; font-size:12px; line-height:1.3; }
  body.asgard-d5-forge #asgard-gifts .ag-entry { padding:16px 22px; gap:22px; }
  body.asgard-d5-forge #asgard-gifts .ag-entry-fig img { max-height:max(220px, calc(100vh - 330px)); }
  body.asgard-d5-forge #asgard-gifts .ag-grid { grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr); gap:14px; height:var(--ag-fit,auto); align-items:stretch; }
  body.asgard-d5-forge #asgard-gifts .ag-steps { max-height:none; height:100%; box-sizing:border-box; overflow-y:auto; scrollbar-width:thin; padding:10px 16px 0; }
  body.asgard-d5-forge #asgard-gifts .ag-preview { position:static; height:100%; box-sizing:border-box; display:flex; flex-direction:column; padding:10px 12px; min-height:0; }
  body.asgard-d5-forge #asgard-gifts .ag-canvas-h { display:none; }
  body.asgard-d5-forge #asgard-gifts .ag-frame { width:min(100%, calc((var(--ag-fit,560px) - 150px) * var(--ag-aspect,1.2857))); flex:0 0 auto; }
  body.asgard-d5-forge #asgard-gifts .ag-preview .ag-note { font-size:.72rem; line-height:1.3; }
  body.asgard-d5-forge #asgard-gifts .ag-on { margin-top:6px; padding:5px 8px; }
  body.asgard-d5-forge #asgard-gifts .ag-on img { width:36px; height:36px; }
  body.asgard-d5-forge #asgard-gifts .ag-preview .ag-share { margin-top:auto; padding-top:4px; }
  body.asgard-d5-forge #asgard-gifts .ag-step > h3 { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }   /* the header names the step */
  body.asgard-d5-forge #asgard-gifts .ag-sub { font-size:.82rem; line-height:1.35; }
  body.asgard-d5-forge #asgard-gifts fieldset { margin-top:6px; }
  body.asgard-d5-forge #asgard-gifts legend { margin-bottom:3px; }
  body.asgard-d5-forge #asgard-gifts .ag-navwrap { padding:6px 0 8px; }
  body.asgard-d5-forge #asgard-gifts .ag-skip-row { margin:3px 0 0; }
  body.asgard-d5-forge #asgard-gifts .ag-linkstep-row { margin:4px 0 6px; padding-top:4px; font-size:.85rem; }
  body.asgard-d5-forge #asgard-gifts .ag-alpha-row { padding:3px 8px; }
  body.asgard-d5-forge #asgard-gifts .ag-hint { font-size:.78rem; }
  body.asgard-d5-forge #asgard-gifts .ag-products img { width:72px; height:72px; }
  body.asgard-d5-forge #asgard-gifts .ag-products { grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); }
  body.asgard-d5-forge #asgard-gifts .ag-art { grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:6px; }
  body.asgard-d5-forge #asgard-gifts .ag-art img, body.asgard-d5-forge #asgard-gifts .ag-art-box { width:62px; height:62px; }
  body.asgard-d5-forge #asgard-gifts .ag-art label { padding:4px; }
  body.asgard-d5-forge #asgard-gifts .ag-art small { font-size:.72rem; line-height:1.15; }
  body.asgard-d5-forge #asgard-gifts .ag-frameopt { margin-top:8px; padding-top:6px; }
  /* Fine-tune in two columns: the long lists (border bands, lettering) take a full row */
  body.asgard-d5-forge #asgard-gifts .ag-step[data-step="style"]:not([hidden]) { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:18px; align-items:start; }
  body.asgard-d5-forge #asgard-gifts .ag-step[data-step="style"] > * { grid-column:auto; min-width:0; }
  body.asgard-d5-forge #asgard-gifts .ag-step[data-step="style"] > h3, body.asgard-d5-forge #asgard-gifts .ag-step[data-step="style"] > .ag-sub,
  body.asgard-d5-forge #asgard-gifts .ag-step[data-step="style"] > .ag-borders, body.asgard-d5-forge #asgard-gifts .ag-step[data-step="style"] > .ag-fonts,
  body.asgard-d5-forge #asgard-gifts .ag-step[data-step="style"] > .ag-nowords, body.asgard-d5-forge #asgard-gifts .ag-step[data-step="style"] > .ag-backs,
  body.asgard-d5-forge #asgard-gifts .ag-step[data-step="style"] > .ag-fcolor, body.asgard-d5-forge #asgard-gifts .ag-step[data-step="style"] > .ag-hide { grid-column:1 / -1; }
  body.asgard-d5-forge #asgard-gifts .ag-step[data-step="style"] > .ag-artcolor { grid-column:2; grid-row:span 2; }   /* the tall one: Words go fills the cell beside it */
  body.asgard-d5-forge #asgard-gifts .ag-borders { grid-template-columns:repeat(7,minmax(0,1fr)); }
  body.asgard-d5-forge #asgard-gifts .ag-borders small { font-size:.66rem; line-height:1.1; }
  body.asgard-d5-forge #asgard-gifts .ag-band { height:18px; }
  body.asgard-d5-forge #asgard-gifts .ag-backs label { width:62px; }
  body.asgard-d5-forge #asgard-gifts .ag-sw { width:26px; height:26px; }
  body.asgard-d5-forge #asgard-gifts .ag-colors label { width:60px; }
  body.asgard-d5-forge #asgard-gifts .ag-colors small { font-size:.64rem; }
  body.asgard-d5-forge #asgard-gifts .ag-fonts span { font-size:1.05rem; }
  body.asgard-d5-forge #asgard-gifts .ag-hide small { display:none; }
  body.asgard-d5-forge #asgard-gifts .ag-step[data-step="style"] > .ag-sub { display:none; }   /* "ready as it is": the header panel already says Not changed */
  body.asgard-d5-forge #asgard-gifts .ag-step[data-step="style"] fieldset { margin-top:4px; }
  /* one row at the foot: Back · Copy a link (editors) · Looks good… · Next */
  body.asgard-d5-forge #asgard-gifts .ag-navwrap { display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center; column-gap:14px; }
  body.asgard-d5-forge #asgard-gifts .ag-nav { display:contents; }
  body.asgard-d5-forge #asgard-gifts .ag-nav .ag-back { grid-column:1; grid-row:1; }
  body.asgard-d5-forge #asgard-gifts .ag-nav .ag-back[hidden] { display:none; }
  body.asgard-d5-forge #asgard-gifts .ag-nav .ag-next, body.asgard-d5-forge #asgard-gifts .ag-nav .ag-make { grid-column:4; grid-row:1; margin:0; }
  body.asgard-d5-forge #asgard-gifts .ag-linkstep-row { grid-column:2; grid-row:1; margin:0; padding:0; border:0; font-size:.78rem; }
  body.asgard-d5-forge #asgard-gifts .ag-skip-row { grid-column:3; grid-row:1; margin:0; text-align:right; font-size:.9rem; }
  /* the art tiles: captions on two lines at most */
  body.asgard-d5-forge #asgard-gifts .ag-art small { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  /* the words step: runes-first on one line, each alphabet on one line */
  body.asgard-d5-forge #asgard-gifts .ag-first legend { float:left; width:auto; margin:6px 10px 0 0; }
  body.asgard-d5-forge #asgard-gifts .ag-alpha-row small { font-size:.68rem; }
  body.asgard-d5-forge #asgard-gifts .ag-ideas { margin-top:0; }
  body.asgard-d5-forge #asgard-gifts .ag-count { margin:-2px 0 0; font-size:.75rem; line-height:1.2; }
  body.asgard-d5-forge #asgard-gifts .ag-hide { flex-wrap:nowrap; margin-top:2px; }
  body.asgard-d5-forge #asgard-gifts .ag-hide legend { width:auto; float:left; margin:0 10px 0 0; }
  body.asgard-d5-forge #asgard-gifts .ag-backs label { width:66px; }
  body.asgard-d5-forge #asgard-gifts .ag-backs small, body.asgard-d5-forge #asgard-gifts .ag-borders small, body.asgard-d5-forge #asgard-gifts .ag-colors small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; display:block; }
}
/* short laptop screens (a 1366x768 or 1440x800 screen leaves about 650-700 px for the page once the browser and the admin bar are drawn) */
@media (min-width: 861px) and (max-height: 740px) {
  .rf-h-steps .ag-tabsum { min-height:38px; margin-top:3px; }
  .rf-h-steps .ag-tabsum img { width:38px; height:38px; flex-basis:38px; }
  .cc-h7.rf-h-steps .m { padding-top:5px; padding-bottom:5px; }
  body.asgard-d5-forge #asgard-gifts .ag-step > .ag-sub, body.asgard-d5-forge #asgard-gifts .ag-runes-opts .ag-hint { display:none; }
  body.asgard-d5-forge #asgard-gifts .ag-cats { gap:4px; }
  body.asgard-d5-forge #asgard-gifts .ag-cats label { padding:2px 8px; font-size:.8rem; }
  body.asgard-d5-forge #asgard-gifts .ag-art img, body.asgard-d5-forge #asgard-gifts .ag-art-box { width:54px; height:54px; }
  body.asgard-d5-forge #asgard-gifts .ag-frameopt { margin-top:4px; padding-top:4px; }
  body.asgard-d5-forge #asgard-gifts .ag-fonts label { padding:2px 4px; }
  body.asgard-d5-forge #asgard-gifts .ag-band { height:14px; }
  body.asgard-d5-forge #asgard-gifts .ag-sw { width:20px; height:20px; font-size:.95rem; line-height:1; }
  body.asgard-d5-forge #asgard-gifts .ag-seg label { padding:3px 11px; font-size:.9rem; }
  body.asgard-d5-forge #asgard-gifts .ag-tune-btn { width:30px; height:30px; }
  body.asgard-d5-forge #asgard-gifts .ag-artcolor .ag-tone-note { font-size:.78rem; line-height:1.25; }
  body.asgard-d5-forge #asgard-gifts #ag-text { padding:6px 10px; }
}

/* ---- 0.16.0 (Glen 10/17/26, round 3) ---------------------------------------------------------------------------------------------------------------
   1. Header step panels: the text (number, step name, summary) on the left, the picture on the RIGHT at the full height of the panel. A container
      query on the step list switches back to the picture-under-the-name layout when the panels are too narrow for both (under ~170 px a panel). */
.rf-h-steps .ag-progress { container:rfsteps / inline-size; }
@container rfsteps (min-width: 700px) {
  .rf-h-steps .ag-progress li { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto auto; align-content:start; column-gap:10px; align-items:start; }
  .rf-h-steps .ag-progress li > button { grid-column:1; grid-row:1; }
  .rf-h-steps .ag-progress .ag-tabsum { display:contents; }
  .rf-h-steps .ag-progress .ag-tabsum > img { grid-column:2; grid-row:1 / span 3; align-self:center; width:64px; height:64px; flex:none; }
  .rf-h-steps .ag-progress .ag-tabsum > :not(img) { grid-column:1; align-self:start; margin-top:4px; }
  .rf-h-steps .ag-progress .ag-tabsum > :not(img) + :not(img) { margin-top:1px; }
  .rf-h-steps .ag-progress .ag-tabsum .ag-sum-t { -webkit-line-clamp:2; }
}
/* 2. Artwork: pictures only, as large as the measured room allows (gifts.js sets the columns and --ag-tile); the title stays as the tile's
      accessible name and hover tooltip. "Words only" keeps its short visible label. */
@media (min-width: 861px) {
  body.asgard-d5-forge #asgard-gifts .ag-art { gap:6px; justify-content:center; }
  body.asgard-d5-forge #asgard-gifts .ag-art label { padding:4px; gap:0; justify-content:center; }
  body.asgard-d5-forge #asgard-gifts .ag-art label:not(.ag-art-none) > small { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  body.asgard-d5-forge #asgard-gifts .ag-art img { width:calc(var(--ag-tile,96px) - 12px); height:calc(var(--ag-tile,96px) - 12px); }
  body.asgard-d5-forge #asgard-gifts .ag-art .ag-art-box { width:calc(var(--ag-tile,96px) - 12px); height:calc(var(--ag-tile,96px) - 34px); font-size:calc(var(--ag-tile,96px) * .3); }
  body.asgard-d5-forge #asgard-gifts .ag-art-none small { font-size:.75rem; }
/* 3. Gifts: pictures only, as large as the room allows; the chosen gift's name and price in one line above its colors, and the colors pinned to the
      foot of the step. Every tile keeps its name and price as its accessible name and its name as a tooltip. */
  body.asgard-d5-forge #asgard-gifts .ag-products { gap:8px; justify-content:center; grid-auto-flow:row; }
  body.asgard-d5-forge #asgard-gifts .ag-products > label { padding:6px; justify-content:center; }
  body.asgard-d5-forge #asgard-gifts .ag-products > label > span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  body.asgard-d5-forge #asgard-gifts .ag-products > label > img { width:calc(var(--ag-tile,96px) - 14px); height:calc(var(--ag-tile,96px) - 14px); object-fit:contain; }
  body.asgard-d5-forge #asgard-gifts .ag-psel { margin:8px 0 0; font-size:.95rem; text-align:center; }
  body.asgard-d5-forge #asgard-gifts .ag-psel[hidden] { display:none; }
  body.asgard-d5-forge #asgard-gifts .ag-psel .asgard-price { color:var(--ag-maroon,#7a1f1f); font-weight:600; }
  body.asgard-d5-forge #asgard-gifts .ag-step[data-step="product"] > .ag-pcolors { margin:6px 0 0; padding:6px 10px; }
  body.asgard-d5-forge #asgard-gifts .ag-step[data-step="product"] > .ag-pcolors .ag-pcolor-hint { display:none; }
}
@media (min-width: 861px) and (max-height: 740px) {
  @container rfsteps (min-width: 700px) { .rf-h-steps .ag-progress .ag-tabsum > img { width:52px; height:52px; } }
}
/* the artwork titles are gone on phones too (Glen: "not necessary"); each tile keeps its title as its accessible name */
body.asgard-d5-forge #asgard-gifts .ag-art label:not(.ag-art-none) > small { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---- 0.17.0 (Glen 10/17/26, round 4) -----------------------------------------------------------------------------------------------------------------
   1. ONE page control, the home page tool slider's look (asgard-redesign-home.php .asgard-slider__nav): square arrow buttons, round dots, the current
      dot filled maroon; edge dots shrink when only a window of the pages is shown. The page count lives in a hidden live line for screen readers. */
#asgard-gifts .ag-sr { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0; padding:0; }
#asgard-gifts .ag-dotpager { display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; gap:14px; margin:10px 0 0; }
#asgard-gifts .ag-dotpager[hidden] { display:none; }
#asgard-gifts .ag-dotpager .ag-dp-prev, #asgard-gifts .ag-dotpager .ag-dp-next { width:36px; min-width:36px; height:36px; border-radius:6px; border:1px solid #e6dccb; background:#fff; color:#6b1a1f;
  font:24px/1 Georgia,serif; padding:0 0 3px; cursor:pointer; flex:0 0 auto; }
#asgard-gifts .ag-dotpager .ag-dp-prev:hover, #asgard-gifts .ag-dotpager .ag-dp-next:hover { background:#6b1a1f; color:#fff; }
#asgard-gifts .ag-dotpager .ag-dp-prev:focus-visible, #asgard-gifts .ag-dotpager .ag-dp-next:focus-visible { outline:2px solid #6b1a1f; outline-offset:2px; }
#asgard-gifts .ag-dotpager .ag-dp-prev[disabled], #asgard-gifts .ag-dotpager .ag-dp-next[disabled] { opacity:.35; cursor:default; }
#asgard-gifts .ag-dotpager .ag-pg-dots { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
#asgard-gifts .ag-dotpager .ag-pg-dot { width:10px; height:10px; min-width:0; border-radius:50%; border:0; background:#d9cdb8; padding:0; cursor:pointer; font-size:0; line-height:0; }
#asgard-gifts .ag-dotpager .ag-pg-dot:hover { background:#b9a98e; }
#asgard-gifts .ag-dotpager .ag-pg-dot.is-active { background:#6b1a1f; box-shadow:0 0 0 2px #fff, 0 0 0 3px #6b1a1f; }
#asgard-gifts .ag-dotpager .ag-pg-dot.is-edge { width:6px; height:6px; }
#asgard-gifts .ag-dotpager .ag-pg-dot:focus-visible { outline:2px solid #6b1a1f; outline-offset:2px; }
/* 2-3. Fixed tiles on the Forge page: the grid size comes from gifts.js (6 x 2 desktop; artwork 4 x 3 on phones); every tile fills its cell */
body.asgard-d5-forge #asgard-gifts .ag-art { gap:6px; justify-content:start; align-content:start; }
body.asgard-d5-forge #asgard-gifts .ag-art > label { box-sizing:border-box; width:100%; height:100%; min-height:0; padding:4px; margin:0; display:flex; align-items:center; justify-content:center; }
body.asgard-d5-forge #asgard-gifts .ag-art > label > img { width:calc(var(--ag-tile,96px) - 14px); height:calc(var(--ag-tile,96px) - 14px); object-fit:contain; }
body.asgard-d5-forge #asgard-gifts .ag-art > .ag-art-none { flex-direction:column; gap:2px; }
body.asgard-d5-forge #asgard-gifts .ag-art > .ag-art-none .ag-art-box { width:calc(var(--ag-tile,96px) - 20px); height:calc(var(--ag-tile,96px) - 40px); font-size:calc(var(--ag-tile,96px) * .28); }
@media (min-width: 861px) {
  body.asgard-d5-forge #asgard-gifts .ag-products { gap:6px; justify-content:start; align-content:start; }
  body.asgard-d5-forge #asgard-gifts .ag-products > label { box-sizing:border-box; width:100%; height:100%; min-height:0; margin:0; padding:4px; display:flex; align-items:center; justify-content:center; }
  body.asgard-d5-forge #asgard-gifts .ag-products > label > img { width:calc(var(--ag-tile,96px) - 14px); height:calc(var(--ag-tile,96px) - 14px); }
  /* 4. Nothing moves: the page control, the chosen gift's line and its color row keep their room even while hidden */
  body.asgard-d5-forge #asgard-gifts .ag-dotpager[hidden] { display:flex; visibility:hidden; }
  body.asgard-d5-forge #asgard-gifts .ag-psel { height:22px; line-height:22px; margin:6px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  body.asgard-d5-forge #asgard-gifts .ag-psel[hidden] { display:block; visibility:hidden; }
  body.asgard-d5-forge #asgard-gifts .ag-step[data-step="product"] > .ag-pcolors { box-sizing:border-box; height:76px; overflow:hidden; margin:4px 0 0; }
  body.asgard-d5-forge #asgard-gifts .ag-step[data-step="product"] > .ag-pcolors[hidden] { display:block; visibility:hidden; }
  body.asgard-d5-forge #asgard-gifts .ag-step[data-step="product"] > .ag-pcolors .ag-pcolor-list { flex-wrap:nowrap; }
  body.asgard-d5-forge #asgard-gifts .ag-art-count { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}
/* round 3 leftover: Fine-tune was 12 px over at 1366 x 657; on short screens the "Auto picked ..." note goes (the greyed option still shows it) */
@media (min-width: 861px) and (max-height: 740px) { body.asgard-d5-forge #asgard-gifts .ag-artcolor .ag-tone-note { display:none; } }
/* the border / circle choice on desktop: on the checkbox's own line (small swatches, names as tooltips, the size control beside them), so opening it
   adds almost no height and never moves the tiles or makes the card scroll */
@media (min-width: 861px) {
  body.asgard-d5-forge #asgard-gifts .ag-frameopt { display:flex; align-items:center; gap:12px; flex-wrap:nowrap; min-height:52px; margin-top:6px; padding-top:4px; }
  body.asgard-d5-forge #asgard-gifts .ag-frameopt > .ag-frame-check { flex:0 1 auto; white-space:nowrap; font-size:.92rem; }
  body.asgard-d5-forge #asgard-gifts .ag-frames { display:flex; flex-wrap:nowrap; align-items:center; gap:6px; margin:0; padding:0; border:0; min-width:0; }
  body.asgard-d5-forge #asgard-gifts .ag-frames[hidden] { display:none; }
  body.asgard-d5-forge #asgard-gifts .ag-frames > legend, body.asgard-d5-forge #asgard-gifts .ag-frames label small, body.asgard-d5-forge #asgard-gifts .ag-frames .ag-hint { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  body.asgard-d5-forge #asgard-gifts .ag-frames label { width:auto; padding:2px; border-radius:8px; }
  body.asgard-d5-forge #asgard-gifts .ag-frame-sw { width:42px; height:42px; }
  body.asgard-d5-forge #asgard-gifts .ag-frame-sw img { width:40px; height:40px; }
  body.asgard-d5-forge #asgard-gifts .ag-frames .ag-sz-ring { margin:0 0 0 6px; gap:6px; white-space:nowrap; }
  body.asgard-d5-forge #asgard-gifts .ag-frames .ag-sz-legend { font-size:.7rem; }
  body.asgard-d5-forge #asgard-gifts .ag-frames .ag-tune-btn { width:28px; height:28px; }
}
#asgard-gifts .ag-vh { visibility:hidden !important; }
@media (min-width: 861px) { body.asgard-d5-forge #asgard-gifts .ag-art, body.asgard-d5-forge #asgard-gifts .ag-products { justify-content:center; } }
@media (min-width: 861px) and (max-height: 740px) {
  body.asgard-d5-forge #asgard-gifts .ag-step[data-step="style"] .ag-pos > legend,
  body.asgard-d5-forge #asgard-gifts .ag-step[data-step="style"] .ag-sz-runes > legend,
  body.asgard-d5-forge #asgard-gifts .ag-step[data-step="style"] .ag-sz-text > legend { float:left; width:auto; margin:7px 10px 0 0; }
}
@media (min-width: 861px) and (max-height: 740px) { body.asgard-d5-forge #asgard-gifts .ag-step[data-step="style"] fieldset { margin-top:2px; } body.asgard-d5-forge #asgard-gifts .ag-step[data-step="style"] legend { margin-bottom:1px; } }

/* ---- 0.17.2 (Glen 10/17/26): the lettering font on the words step (no colors); same pills as the mode choice, one row, each in its own face ---- */
#asgard-gifts .ag-fontq { flex-wrap:wrap; }
#asgard-gifts .ag-fontq legend { float:left; width:auto; margin:6px 10px 0 0; }
#asgard-gifts .ag-fontq label { padding:4px 14px; }
#asgard-gifts .ag-fontq label[hidden] { display:none; }
@media (max-width: 860px) { #asgard-gifts .ag-fontq { flex-wrap:wrap; } #asgard-gifts .ag-fontq legend { float:none; width:100%; } }
@media (min-width: 861px) and (max-height: 740px) { body.asgard-d5-forge #asgard-gifts .ag-fontq label { padding:2px 11px; font-size:.9rem; } body.asgard-d5-forge #asgard-gifts .ag-fontq legend { margin-top:3px; } }

/* ---- 0.17.3 (Glen 10/17/26): the text size - / + on the Lettering row (step 1); same state as Fine-tune, no added height ---- */
#asgard-gifts .ag-fontq .ag-tune-q { display:flex; align-items:center; gap:6px; flex:0 0 100%; margin:2px 0 0; }
#asgard-gifts .ag-fontq .ag-tune-lab { font-size:.85rem; color:#4a3a2a; margin-right:4px; }
#asgard-gifts .ag-fontq .ag-tune-q output { min-width:2.2em; text-align:center; }
#asgard-gifts .ag-fontq .ag-tune-q .ag-tune-btn { width:28px; height:28px; }

/* ---- 0.17.4 (Glen 10/17/26): the text size sits on its own line beneath the Lettering pills ---- */
@media (min-width: 861px) and (max-height: 740px) { body.asgard-d5-forge #asgard-gifts .ag-fontq { row-gap:0; } body.asgard-d5-forge #asgard-gifts .ag-fontq .ag-tune-q { margin-top:-4px; } body.asgard-d5-forge #asgard-gifts .ag-fontq .ag-tune-q .ag-tune-btn { width:20px; height:20px; font-size:.95rem; line-height:1; } }

/* ---- 0.17.5 (Glen 10/16/26): the rune rows on step 1 are taller (bigger glyphs), one line each at any length. --ag-rc is the largest size; gifts.js
   (fitRunes) shrinks a row only when its words would not fit, so a 30-character name never wraps. The row height is fixed by the cap so nothing jumps while typing. */
#asgard-gifts .ag-alpha-row { min-width:0; }
#asgard-gifts .ag-alpha-runes { --ag-rc:26px; font-size:var(--ag-rc); display:block; min-width:0; overflow:hidden; height:calc(var(--ag-rc) * 1.2); line-height:calc(var(--ag-rc) * 1.2); white-space:nowrap; overflow-wrap:normal; }
@media (min-width: 861px) and (min-height: 790px) { #asgard-gifts .ag-alpha-runes { --ag-rc:30px; } }
@media (min-width: 861px) and (min-height: 741px) and (max-height: 789px) { #asgard-gifts .ag-alpha-runes { --ag-rc:24px; } }
@media (min-width: 861px) and (max-height: 740px) { #asgard-gifts .ag-alpha-runes { --ag-rc:21px; } body.asgard-d5-forge #asgard-gifts .ag-alpha-row { padding:1px 8px; } }
#asgard-gifts .ag-alphas { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width: 860px) { #asgard-gifts .ag-alphas { grid-template-columns:minmax(0,1fr); } }

/* 0.20.0 (W29): class E panel choices (Fine-tune) and the layout -> photo note under the preview */
.ag-panelopts { margin:0 0 1rem; padding:.6rem .8rem; border:1px solid #e3d3a8; border-radius:8px; background:#fffcf4; }
.ag-panelopts fieldset { border:0; margin:.4rem 0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem .6rem; align-items:center; }
.ag-panelopts legend { font-weight:700; margin-bottom:.2rem; width:100%; }
.ag-panelopts label { display:inline-flex; align-items:center; gap:.3rem; cursor:pointer; }
.ag-pnl-pc label { flex-direction:column; width:4.6rem; text-align:center; }
.ag-pnl-pc small { font-size:.72rem; line-height:1.15; }
.ag-pnl-sw { display:block; width:2.6rem; height:2rem; border-radius:6px; border:1px solid #b9a77a; font:700 .95rem/2rem 'IBM Plex Sans',Arial,sans-serif; text-align:center; }
.ag-pnl-pc input:checked + .ag-pnl-sw { outline:3px solid #B8860B; outline-offset:2px; }
.ag-pnl-az output { min-width:2.2rem; text-align:center; font-weight:700; }
.ag-pnl-h { margin:0 0 .3rem; font-size:.92rem; }
.ag-pv-note { font-size:.86rem; margin:.4rem 0 0; color:#4a3b22; }
.ag-pv-flip { border:0; background:none; color:#7a1f1f; text-decoration:underline; cursor:pointer; padding:0; font:inherit; }
/* G1 (W33, Glen 10/18/26): the Coming soon card in the real-photo slot while ordering is off */
#asgard-gifts .ag-soon { margin:.6rem 0 0; text-align:center; }
#asgard-gifts .ag-soon img { display:block; width:100%; max-width:420px; height:auto; margin:0 auto; border-radius:12px; border:1px solid var(--ag-parch-d); }
#asgard-gifts .ag-soon figcaption { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }   /* the words are on the card; kept for screen readers via alt, caption hidden visually */
#asgard-gifts .ag-gallery-soon .ag-soon { margin:0; }
#asgard-gifts .ag-gallery-soon .ag-soon img { max-width:none; }
/* W48 (launch SOT I3, Glen 10/18/26): the photo panel. ONE large photo with Printful's label under it, the others as a row of labeled thumbnails;
   a click swaps them. Result step (.ag-gallery-ph) and the class E preview strip (.ag-ph-strip, under the note). Phones: the row scrolls sideways. */
#asgard-gifts .ag-gallery.ag-gallery-ph { display:block; }
#asgard-gifts .ag-ph-big { margin:0; }
#asgard-gifts .ag-ph-big img { display:block; width:100%; height:auto; border-radius:12px; border:1px solid var(--ag-parch-d); }
#asgard-gifts .ag-ph-cap { font-size:.9rem; color:#4a3b22; margin:6px 2px 0; }
#asgard-gifts .ag-ph-n { color:var(--ag-muted); font-size:.82rem; }
#asgard-gifts .ag-ph-thumbs { list-style:none; display:flex; gap:8px; margin:10px 0 0; padding:0 0 4px; overflow-x:auto; scroll-snap-type:x proximity; }
#asgard-gifts .ag-ph-thumbs li { flex:0 0 auto; scroll-snap-align:start; margin:0; }
#asgard-gifts .ag-ph-th { display:flex; flex-direction:column; align-items:center; gap:3px; width:96px; padding:4px; background:#fff; border:2px solid var(--ag-parch-d); border-radius:10px; cursor:pointer; font:inherit; color:inherit; }
#asgard-gifts .ag-ph-th:hover { border-color:var(--ag-maroon); }
#asgard-gifts .ag-ph-th:focus-visible { outline:3px solid var(--ag-maroon); outline-offset:2px; }
#asgard-gifts .ag-ph-th img { width:84px; height:84px; object-fit:cover; border-radius:6px; }
#asgard-gifts .ag-ph-tl { font-size:.72rem; line-height:1.15; text-align:center; color:var(--ag-muted); max-width:88px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
#asgard-gifts .ag-ph-strip .ag-ph-thumbs { margin-top:6px; justify-content:center; }
#asgard-gifts .ag-ph-strip .ag-ph-th { width:72px; }
#asgard-gifts .ag-ph-strip .ag-ph-th img { width:60px; height:60px; }
@media (max-width: 860px) {
  #asgard-gifts .ag-ph-thumbs { justify-content:flex-start; }
  #asgard-gifts .ag-ph-th { width:80px; } #asgard-gifts .ag-ph-th img { width:68px; height:68px; }
  #asgard-gifts .ag-ph-strip .ag-ph-th { width:60px; } #asgard-gifts .ag-ph-strip .ag-ph-th img { width:48px; height:48px; }
  #asgard-gifts .ag-ph-strip .ag-ph-tl { display:none; }   /* the sticky phone preview stays small: the tooltip and the note carry the label */
}

/* 0.22.3: editors-only 'View as public' toggle beside Share (not rendered for anyone else) */
#asgard-gifts .ag-viewpub { display:inline-flex; align-items:center; min-height:34px; margin-left:10px; padding:0 14px; border:1.5px solid var(--ag-gold); border-radius:999px; background:#fff6d8; color:var(--ag-maroon); font-family:inherit; font-weight:700; font-size:.85rem; line-height:1; cursor:pointer; vertical-align:middle; }
#asgard-gifts .ag-viewpub[aria-pressed="true"] { background:var(--ag-maroon); color:#fff; border-color:var(--ag-maroon); }
#asgard-gifts .ag-viewpub:focus-visible { outline:2px solid var(--ag-maroon); outline-offset:2px; }

/* 0.22.5: the one-line notice under the waitlist button (replaces the required consent tick box) */
#asgard-gifts .ag-wl-notice { margin:8px 0 0; font-size:.85rem; line-height:1.4; color:var(--ag-muted); }

/* 0.22.8: the page you land on after the confirmation link: a clear green banner (or amber if the link expired), above the disabled-ordering notice */
#asgard-gifts .ag-wl-note.ag-wl-note-ok { background:#dff0e1; border:2px solid #2f5d3a; color:#1d3d26; padding:14px 18px; font-size:1.15rem; line-height:1.4; border-radius:12px; box-shadow:0 2px 0 rgba(47,93,58,.2); }
#asgard-gifts .ag-wl-note.ag-wl-note-ok strong { display:block; font-family:'Cinzel',serif; font-size:1.4rem; color:#1d3d26; margin-bottom:2px; }
#asgard-gifts .ag-wl-note.ag-wl-note-bad { background:#fff3d6; border:2px solid #b8860b; color:#5a3b00; padding:14px 18px; font-size:1.1rem; border-radius:12px; }
#asgard-gifts .ag-wl-note.ag-wl-note-bad strong { display:block; font-family:'Cinzel',serif; font-size:1.3rem; margin-bottom:2px; }