/* v3.5.1 shared guide UI foundation */
.sns-ui-shell{
 --sns-red:#ed1c24;--sns-ink:#101828;--sns-blue:#0868bd;--sns-muted:#667085;
 --sns-border:#d8dde6;--sns-surface:#fff;--sns-soft:#f7f8fa;--sns-radius:4px;
 --sns-shadow:0 4px 14px rgba(16,24,40,.055);color:var(--sns-ink);box-sizing:border-box
}
.sns-ui-shell *{box-sizing:border-box}.sns-ui-eyebrow{display:block;color:var(--sns-red);font-size:11px;font-weight:900;letter-spacing:.055em;text-transform:uppercase}
.sns-ui-section{margin-top:16px;padding:22px;background:var(--sns-surface);border:1px solid var(--sns-border);border-top:3px solid var(--sns-red);box-shadow:var(--sns-shadow);scroll-margin-top:24px}
.sns-ui-section__header{margin:0 0 16px}.sns-ui-section__header h2{margin:4px 0 0;font-size:clamp(22px,2vw,28px);line-height:1.15}
.sns-ui-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sns-ui-card{display:flex;min-width:0;height:100%;flex-direction:column;overflow:hidden;background:#fafbfc;border:1px solid var(--sns-border);border-left:3px solid var(--sns-red);border-radius:var(--sns-radius);color:var(--sns-ink)!important;text-decoration:none!important;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.sns-ui-card:hover{transform:translateY(-2px);border-color:var(--sns-blue);box-shadow:0 7px 18px rgba(16,24,40,.1)}.sns-ui-card:focus-visible{outline:3px solid rgba(8,104,189,.28);outline-offset:2px}
.sns-ui-card__media{display:block;overflow:hidden;background:#eef1f5;border-bottom:1px solid var(--sns-border);aspect-ratio:16/9}.sns-ui-card__media img{display:block;width:100%;height:100%;margin:0;object-fit:cover;transition:transform .2s ease}.sns-ui-card:hover .sns-ui-card__media img{transform:scale(1.025)}
.sns-ui-card__body{display:flex;flex:1;min-width:0;flex-direction:column;gap:5px;padding:15px}.sns-ui-card__eyebrow{color:var(--sns-muted);font-size:10px;font-weight:900;letter-spacing:.025em;text-transform:uppercase}.sns-ui-card__title{font-size:16px;line-height:1.32}.sns-ui-card__meta,.sns-ui-card__description{color:var(--sns-muted);font-size:13px;line-height:1.45}.sns-ui-card__action{margin-top:auto;padding-top:8px;color:var(--sns-blue);font-size:12px;font-weight:800}
.sns-ui-card--character.has-image,.sns-ui-card--issue.has-image{display:grid;grid-template-columns:108px minmax(0,1fr)}.sns-ui-card--character .sns-ui-card__media,.sns-ui-card--issue .sns-ui-card__media{height:100%;aspect-ratio:auto;border-right:1px solid var(--sns-border);border-bottom:0}.sns-ui-card--character .sns-ui-card__media img{object-position:center top}.sns-ui-card--issue .sns-ui-card__media{padding:8px;background:#fff}.sns-ui-card--issue .sns-ui-card__media img{object-fit:contain}
.sns-ui-card--product .sns-ui-card__media{aspect-ratio:1/1;padding:10px;background:#fff}.sns-ui-card--product .sns-ui-card__media img{object-fit:contain}.sns-ui-card--product .price,.sns-ui-card--product .amount{color:var(--sns-red)!important;font-weight:900!important}
@media(max-width:1100px){.sns-ui-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.sns-ui-grid--characters,.sns-ui-grid--issues{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.sns-ui-grid,.sns-ui-grid--characters,.sns-ui-grid--issues{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.sns-ui-section{padding:16px}.sns-ui-grid,.sns-ui-grid--characters,.sns-ui-grid--issues{grid-template-columns:1fr}.sns-ui-card--character.has-image,.sns-ui-card--issue.has-image{grid-template-columns:94px minmax(0,1fr)}}
/* v3.5.2 hub composition: shared layout primitives, legacy selectors retained for compatibility. */
.sns-ui-grid--routes{grid-template-columns:repeat(2,minmax(0,1fr))}
.sns-ui-grid--utility{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:820px){.sns-ui-grid--routes,.sns-ui-grid--utility{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.sns-ui-grid--routes,.sns-ui-grid--utility{grid-template-columns:1fr}}


/* v3.5.3 embedded/homepage migration bridge.
 * Existing shortcode markup/classes stay intact for backwards compatibility;
 * the shared shell supplies the common design tokens and interaction language.
 */
.sns-ui-shell.sns-home-module{
 --sns-red:#ed1c24;--sns-ink:#101828;--sns-blue:#0868bd;--sns-muted:#667085;
 --sns-border:#d8dde6;--sns-surface:#fff;--sns-soft:#f7f8fa;--sns-radius:4px;
 --sns-shadow:0 4px 14px rgba(16,24,40,.055);
 border-color:var(--sns-border);border-top:3px solid var(--sns-red);box-shadow:var(--sns-shadow)
}
.sns-ui-shell.sns-home-module .sns-home-eyebrow{color:var(--sns-red);font-size:11px;letter-spacing:.055em}
.sns-ui-shell.sns-home-module .sns-home-lead{color:var(--sns-muted);line-height:1.6}
.sns-ui-shell.sns-home-module .sns-home-stats a,
.sns-ui-shell.sns-home-module .sns-home-character-visual a,
.sns-ui-shell.sns-home-module .sns-home-key-grid>a,
.sns-ui-shell.sns-home-module .sns-home-screen-card{border-radius:var(--sns-radius);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.sns-ui-shell.sns-home-module .sns-home-stats a:hover,
.sns-ui-shell.sns-home-module .sns-home-character-visual a:hover,
.sns-ui-shell.sns-home-module .sns-home-key-grid>a:hover,
.sns-ui-shell.sns-home-module .sns-home-screen-card:hover{border-color:var(--sns-blue);box-shadow:0 7px 18px rgba(16,24,40,.10)}
.sns-ui-shell.sns-home-module a:focus-visible,
.sns-ui-shell.sns-home-module button:focus-visible,
.sns-ui-shell.sns-home-module input:focus-visible,
.sns-ui-shell.sns-home-module select:focus-visible{outline:3px solid rgba(8,104,189,.28);outline-offset:2px}
.sns-ui-shell.sns-home-module .sns-home-search input,
.sns-ui-shell.sns-home-module .sns-home-search select{border-color:var(--sns-border);border-radius:var(--sns-radius)}
.sns-ui-shell.sns-home-module .sns-home-search button,
.sns-ui-shell.sns-home-module .sns-home-primary{border-radius:var(--sns-radius)}
.sns-ui-shell.sns-home-dark{--sns-ink:#fff;--sns-muted:#d9d9dc;--sns-border:#34363a;--sns-surface:#171719;--sns-soft:#22252a;background:var(--sns-surface);color:var(--sns-ink)}
.sns-ui-shell.sns-home-dark .sns-home-lead{color:var(--sns-muted)}
@media(max-width:600px){.sns-ui-shell.sns-home-module{margin:14px auto}}
