.detail-main { padding: 2rem 0 4rem; }
.back-link { color: #aecdF0; font-size: .9rem; text-underline-offset: .25em; }
.detail-heading { padding: 2.5rem 0 1.75rem; }
.detail-heading h1 { margin-top: .45rem; }
.detail-heading p { color: #b9cbe2; margin: .55rem 0 0; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(18rem, .85fr); gap: 1rem; align-items: start; }
.detail-primary { min-width: 0; }
.obtain-panel, .info-panel { border: 1px solid #244873; border-radius: 6px; overflow: hidden; background: #0c294d; }
.panel-title { margin: 0; padding: 1.1rem 1.25rem; background: #18395f; text-align: center; font-size: 1.25rem; }
.obtain-panel > p { margin: 0; padding: .7rem 1.25rem 1.1rem; color: #bdd0e8; text-align: center; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 2.8rem 1fr; gap: .9rem; align-items: center; padding: 1.15rem 1.25rem; border-top: 1px solid #1e426c; color: #d4e2f4; }
.step-number { display: grid; place-items: center; width: 2rem; height: 2rem; background: #123760; color: #74eda9; border-radius: 4px; font-weight: 900; }
.claim-button { grid-column: 2; width: 100%; display: inline-flex; justify-content: center; padding: .75rem; background: #16bd55; color: #fff; border-bottom: 3px solid #0c8c3d; border-radius: 4px; text-decoration: none; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.claim-button:hover, .claim-button:focus-visible { background: #22d566; outline: 2px solid #b1ffcf; outline-offset: 2px; }
.item-visual { display: grid; place-items: center; min-height: 22rem; padding: 2rem; background: radial-gradient(circle, #1d5488 0, #0c294d 68%); }
.item-visual img { width: min(100%, 15rem); height: 17rem; object-fit: contain; filter: drop-shadow(0 .65rem .6rem rgba(0,0,0,.36)); }
.item-description { margin: 0; padding: 1.25rem; color: #cfdded; line-height: 1.6; }
.item-facts { border-top: 1px solid #244873; background: #26486e; padding: 1rem 1.25rem; display: grid; gap: .65rem; }
.item-facts p { display: flex; justify-content: space-between; gap: 1rem; margin: 0; color: #d5e2f0; }
.item-facts strong { color: #fff; }
.recommendations { margin-top: 1.5rem; }
.recommendation-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.recommendation-heading .eyebrow { margin: 0 0 .28rem; }
.recommendation-heading h2 { margin: 0; font-size: 1.35rem; }
.recommendation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.recommendation-card { min-width: 0; overflow: hidden; background: #0c294d; border: 1px solid #244873; border-radius: 6px; }
.recommendation-card a { display: block; color: #fff; padding: .75rem; text-decoration: none; }
.recommendation-card a:hover, .recommendation-card a:focus-visible { background: #12365e; outline: 2px solid #72b4ed; outline-offset: -2px; }
.recommendation-card img { display: block; width: 100%; height: 6.5rem; object-fit: contain; background: radial-gradient(circle, #1d5488 0, #0c294d 68%); margin-bottom: .7rem; }
.recommendation-card span, .recommendation-card small { display: block; overflow-wrap: anywhere; }
.recommendation-card span { font-weight: 800; font-size: .9rem; }
.recommendation-card small { margin-top: .25rem; color: #78e6a7; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.not-found { padding: 5rem 0; }
@media (max-width: 760px) { .detail-layout { grid-template-columns: 1fr; } .item-visual { min-height: 17rem; } }
@media (max-width: 430px) { .detail-main { padding-top: 1.25rem; } .detail-heading { padding-top: 1.75rem; } .steps li { padding: 1rem; grid-template-columns: 2.2rem 1fr; } .recommendation-grid { gap: .5rem; } .recommendation-card a { padding: .55rem; } .recommendation-card img { height: 5.1rem; } .recommendation-card span { font-size: .8rem; } }