/* FlaroCity Spirit Beasts — approved Battles-theme Packs page. */
html body main.approved-packs-page {
    width: 100%;
    margin: 0;
    padding: 0 0 8px;
}

html body main.approved-packs-page .packs-hero {
    width: min(calc(100% - 56px), 1780px);
    margin: 0 auto 8px;
    padding: 18px 24px 22px;
    text-align: center;
    background: transparent;
    border: 0;
    box-shadow: none;
}

html body main.approved-packs-page .packs-hero h1 {
    margin: 0 0 8px;
    color: #f4d27a;
    font-size: clamp(4rem, 5.1vw, 6rem);
    line-height: .98;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    text-shadow: 0 3px 16px rgba(0, 0, 0, .78);
}

html body main.approved-packs-page .packs-hero > p {
    max-width: 900px;
    margin: 0 auto;
    color: #e2d5b8;
    font-size: clamp(1rem, 1.25vw, 1.18rem);
    line-height: 1.45;
}

html body main.approved-packs-page .packs-hero-divider {
    display: block;
    width: min(620px, 72vw);
    height: auto;
    margin: 12px auto 8px;
    border: 0;
    background: transparent;
    filter: drop-shadow(0 0 8px rgba(116, 48, 201, .44));
}

html body main.approved-packs-page .packs-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0;
}

html body main.approved-packs-page .packs-hero-actions .image-button img {
    width: 150px;
    max-height: 50px;
    object-fit: contain;
}

html body main.approved-packs-page .packs-frame {
    position: relative;
    isolation: isolate;
    width: min(calc(100% - 56px), 1780px);
    margin: 0 auto 8px;
    padding: 30px 34px 34px;
    overflow: hidden;
    border: 0;
    background: rgba(1, 6, 10, .82);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .24);
}

html body main.approved-packs-page .packs-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url('../../img/fcsb/ui/bboard.webp') center / 100% 100% no-repeat;
}

html body main.approved-packs-page .packs-section-heading {
    max-width: 940px;
    margin: 0 auto 18px;
    text-align: center;
}

html body main.approved-packs-page .packs-section-heading .eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #cbbd98;
    font-size: .82rem;
    letter-spacing: .04em;
}

html body main.approved-packs-page .packs-section-heading h2 {
    margin: 0 0 6px;
    color: #f4d27a;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2.45rem, 3.2vw, 4rem);
    line-height: 1.05;
}

html body main.approved-packs-page .packs-section-heading p {
    margin: 0 auto;
    color: #d9cdb3;
    font-size: 1rem;
    line-height: 1.45;
}

html body main.approved-packs-page .pack-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin: 0;
}

html body main.approved-packs-page .pack-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    min-height: 620px;
    padding: 18px 18px 16px;
    text-align: center;
    border: 1px solid rgba(205, 148, 45, .58);
    background:
        radial-gradient(circle at 50% 30%, rgba(108, 37, 165, .14), transparent 48%),
        linear-gradient(155deg, rgba(12, 12, 24, .86), rgba(1, 6, 10, .92));
    box-shadow: inset 0 0 26px rgba(80, 35, 120, .08);
}

html body main.approved-packs-page .pack-card header {
    min-height: 76px;
}

html body main.approved-packs-page .pack-card h3 {
    margin: 0 0 4px;
    color: #f4d27a;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.85rem, 2.15vw, 2.8rem);
    line-height: 1.05;
}

html body main.approved-packs-page .pack-card header span {
    color: #d88df1;
    font-size: 1rem;
}

html body main.approved-packs-page .pack-card-art {
    display: block;
    width: min(210px, 72%);
    height: 255px;
    margin: 4px auto 10px;
    object-fit: contain;
    border: 0;
    background: transparent;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, .66));
}

html body main.approved-packs-page .pack-description {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    max-width: 320px;
    margin: 0 auto 10px;
    color: #ddd0b4;
    font-size: .96rem;
    line-height: 1.42;
}

html body main.approved-packs-page .pack-price {
    width: min(240px, 88%);
    min-height: 48px;
    margin: 0 auto 10px;
}

html body main.approved-packs-page .pack-price span {
    font-size: clamp(1.75rem, 2.1vw, 2.35rem);
}

html body main.approved-packs-page .odds-list {
    width: 100%;
    margin: auto 0 0;
    padding: 8px 12px;
    border: 1px solid rgba(205, 148, 45, .52);
    background: rgba(1, 5, 8, .68);
}

html body main.approved-packs-page .odds-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 30px;
    gap: 12px;
    border-bottom: 1px solid rgba(205, 148, 45, .14);
    color: #d9cdb3;
    font-size: .88rem;
}

html body main.approved-packs-page .odds-list div:last-child {
    border-bottom: 0;
}

html body main.approved-packs-page .odds-list dt,
html body main.approved-packs-page .odds-list dd {
    margin: 0;
}

html body main.approved-packs-page .odds-list dd {
    color: #fff1c0;
    font-weight: 700;
}

html body main.approved-packs-page .packs-flow {
    padding-top: 28px;
}

html body main.approved-packs-page .packs-guide-button {
    position: absolute;
    top: 28px;
    right: 34px;
    z-index: 2;
}

html body main.approved-packs-page .packs-guide-button img {
    width: 135px;
    max-height: 46px;
    object-fit: contain;
}

html body main.approved-packs-page .packs-flow .packs-section-heading {
    padding-inline: 150px;
    margin-bottom: 16px;
}

html body main.approved-packs-page .feature-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

html body main.approved-packs-page .feature-row article {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 132px;
    padding: 16px 18px;
    text-align: center;
    border: 1px solid rgba(205, 148, 45, .42);
    background: rgba(1, 6, 10, .68);
}

html body main.approved-packs-page .feature-row img {
    width: 42px;
    height: 42px;
    margin: 0 auto 7px;
    object-fit: contain;
}

html body main.approved-packs-page .feature-row h3 {
    margin: 0 0 5px;
    color: #f4d27a;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.25rem;
}

html body main.approved-packs-page .feature-row p {
    max-width: 380px;
    margin: 0;
    color: #d9cdb3;
    font-size: .88rem;
    line-height: 1.42;
}

html body:has(main.approved-packs-page) .site-footer {
    width: min(calc(100% - 56px), 1780px);
    margin: 0 auto;
}

@media (max-width: 1180px) {
    html body main.approved-packs-page .pack-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    html body main.approved-packs-page .packs-hero,
    html body main.approved-packs-page .packs-frame,
    html body:has(main.approved-packs-page) .site-footer {
        width: calc(100% - 24px);
    }

    html body main.approved-packs-page .packs-frame {
        padding: 26px 18px 28px;
    }

    html body main.approved-packs-page .packs-flow .packs-section-heading {
        padding-inline: 0;
    }

    html body main.approved-packs-page .packs-guide-button {
        position: static;
        display: flex;
        justify-content: center;
        margin: 0 auto 10px;
    }

    html body main.approved-packs-page .feature-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    html body main.approved-packs-page .pack-grid {
        grid-template-columns: 1fr;
    }

    html body main.approved-packs-page .pack-card {
        min-height: 0;
    }
}

/* Final Packs frame-heading clearance pass.
   Keep both section titles and the Pack Guide button inside the ornate frames. */
html body main.approved-packs-page .packs-catalog {
    padding-top: 68px;
}

html body main.approved-packs-page .packs-flow {
    padding-top: 64px;
}

html body main.approved-packs-page .packs-guide-button {
    top: 42px;
}

html body main.approved-packs-page .packs-catalog .packs-section-heading,
html body main.approved-packs-page .packs-flow .packs-section-heading {
    position: relative;
    z-index: 1;
}

@media (max-width: 820px) {
    html body main.approved-packs-page .packs-catalog,
    html body main.approved-packs-page .packs-flow {
        padding-top: 52px;
    }

    html body main.approved-packs-page .packs-guide-button {
        top: auto;
    }
}

/* Choose Your Pack artwork sign.
   Replaces the plain visual heading while preserving the accessible H2. */
html body main.approved-packs-page .packs-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

html body main.approved-packs-page .packs-collection-heading {
    max-width: 1080px;
    margin-bottom: 16px;
}

html body main.approved-packs-page .packs-collection-sign {
    display: block;
    width: min(610px, 64vw);
    height: auto;
    max-height: 230px;
    margin: 2px auto 2px;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .6));
}

html body main.approved-packs-page .packs-catalog {
    padding-top: 34px;
}

html body main.approved-packs-page .packs-collection-heading .eyebrow {
    margin-bottom: 0;
}

@media (max-width: 820px) {
    html body main.approved-packs-page .packs-collection-sign {
        width: min(560px, 88vw);
        max-height: 210px;
    }

    html body main.approved-packs-page .packs-catalog {
        padding-top: 28px;
    }
}

@media (max-width: 620px) {
    html body main.approved-packs-page .packs-collection-sign {
        width: 96%;
        max-height: none;
    }
}

/* Packs final layout correction:
   - keep ornate section artwork clear of frame lines
   - keep inner cards fully inside their frames
   - restore the four-pack presentation on both sides of the centered hero. */
html body main.approved-packs-page .packs-hero {
    position: relative;
    min-height: 250px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: visible;
}

html body main.approved-packs-page .packs-hero-copy {
    position: relative;
    z-index: 2;
    width: min(900px, 58vw);
    margin: 0 auto;
    text-align: center;
}

html body main.approved-packs-page .packs-hero-copy > p {
    max-width: 900px;
    margin: 0 auto;
    color: #e2d5b8;
    font-size: clamp(1rem, 1.25vw, 1.18rem);
    line-height: 1.45;
}

html body main.approved-packs-page .packs-hero-pack-group {
    position: absolute;
    top: 18px;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 310px;
    height: 190px;
    pointer-events: none;
    opacity: .98;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .72));
}

html body main.approved-packs-page .packs-hero-pack-group-left {
    left: 34px;
}

html body main.approved-packs-page .packs-hero-pack-group-right {
    right: 34px;
}

html body main.approved-packs-page .packs-hero-pack-group img {
    display: block;
    width: 82px;
    height: 178px;
    margin: 0 -8px;
    object-fit: contain;
    transform-origin: 50% 100%;
}

html body main.approved-packs-page .packs-hero-pack-group img:nth-child(1) {
    transform: rotate(-8deg) translateY(9px);
}
html body main.approved-packs-page .packs-hero-pack-group img:nth-child(2) {
    transform: rotate(-3deg) translateY(2px);
}
html body main.approved-packs-page .packs-hero-pack-group img:nth-child(3) {
    transform: rotate(3deg) translateY(2px);
}
html body main.approved-packs-page .packs-hero-pack-group img:nth-child(4) {
    transform: rotate(8deg) translateY(9px);
}

/* Keep the new sign entirely below the ornate top rail. */
html body main.approved-packs-page .packs-catalog {
    padding-top: 74px;
    padding-bottom: 72px;
}

html body main.approved-packs-page .packs-collection-heading {
    margin-bottom: 24px;
}

html body main.approved-packs-page .packs-collection-sign {
    width: min(560px, 58vw);
    max-height: 205px;
    margin: 14px auto 6px;
}

/* Keep card boxes above the bottom ornament instead of crossing it. */
html body main.approved-packs-page .pack-grid,
html body main.approved-packs-page .feature-row {
    position: relative;
    z-index: 2;
}

html body main.approved-packs-page .pack-card {
    min-height: 0;
    height: 100%;
}

html body main.approved-packs-page .packs-flow {
    padding-top: 68px;
    padding-bottom: 76px;
}

html body main.approved-packs-page .packs-flow .packs-section-heading {
    margin-bottom: 22px;
}

html body main.approved-packs-page .feature-row article {
    min-height: 142px;
}

@media (max-width: 1380px) {
    html body main.approved-packs-page .packs-hero-pack-group {
        width: 250px;
        opacity: .82;
    }
    html body main.approved-packs-page .packs-hero-pack-group-left { left: 8px; }
    html body main.approved-packs-page .packs-hero-pack-group-right { right: 8px; }
    html body main.approved-packs-page .packs-hero-pack-group img {
        width: 68px;
        height: 154px;
    }
}

@media (max-width: 1120px) {
    html body main.approved-packs-page .packs-hero-copy {
        width: min(900px, 76vw);
    }
    html body main.approved-packs-page .packs-hero-pack-group {
        display: none;
    }
}

@media (max-width: 820px) {
    html body main.approved-packs-page .packs-hero {
        min-height: 0;
    }
    html body main.approved-packs-page .packs-hero-copy {
        width: 100%;
    }
    html body main.approved-packs-page .packs-catalog,
    html body main.approved-packs-page .packs-flow {
        padding-top: 54px;
        padding-bottom: 54px;
    }
    html body main.approved-packs-page .packs-collection-sign {
        width: min(520px, 86vw);
        margin-top: 8px;
    }
}


/* FSB_PACKS_FINAL_FRAME_CLEARANCE_20260711
   Keep every inner card fully above the ornate lower rails and move the
   Pack Guide button off the top border. */
html body main.approved-packs-page .packs-catalog {
    padding-bottom: 122px;
}

html body main.approved-packs-page .packs-catalog .pack-grid {
    margin-bottom: 26px;
}

html body main.approved-packs-page .packs-flow {
    padding-top: 82px;
    padding-bottom: 112px;
}

html body main.approved-packs-page .packs-guide-button {
    top: 66px;
    right: 48px;
}

html body main.approved-packs-page .packs-flow .feature-row {
    margin-bottom: 28px;
}

@media (max-width: 820px) {
    html body main.approved-packs-page .packs-catalog,
    html body main.approved-packs-page .packs-flow {
        padding-bottom: 72px;
    }

    html body main.approved-packs-page .packs-flow {
        padding-top: 54px;
    }

    html body main.approved-packs-page .packs-guide-button {
        top: auto;
        right: auto;
    }
}

/* FSB_PACKS_FINAL_FIT_CENTER_20260711
   Final Packs-only fit pass:
   - make the four hero pack groups larger
   - inset and shorten the four pack cards so they remain inside the ornate frame
   - center and shrink the purchase-flow cards
   - keep the Pack Guide button centered inside its frame. */

/* Larger four-pack artwork on both sides of the Packs title. */
html body main.approved-packs-page .packs-hero-pack-group {
    width: 430px;
    height: 218px;
    top: 4px;
}

html body main.approved-packs-page .packs-hero-pack-group-left {
    left: 8px;
}

html body main.approved-packs-page .packs-hero-pack-group-right {
    right: 8px;
}

html body main.approved-packs-page .packs-hero-pack-group img {
    width: 108px;
    height: 212px;
    margin: 0 -11px;
}

/* Keep the catalog content comfortably inside the ornate frame. */
html body main.approved-packs-page .packs-catalog {
    padding: 72px 40px 92px;
}

html body main.approved-packs-page .packs-catalog .pack-grid {
    width: calc(100% - 84px);
    max-width: 1540px;
    margin: 0 auto;
    gap: 8px;
    align-items: stretch;
}

html body main.approved-packs-page .pack-card {
    min-height: 0;
    padding: 12px 13px 12px;
}

html body main.approved-packs-page .pack-card header {
    min-height: 54px;
}

html body main.approved-packs-page .pack-card h3 {
    font-size: clamp(1.62rem, 1.82vw, 2.25rem);
}

html body main.approved-packs-page .pack-card header span {
    font-size: .92rem;
}

html body main.approved-packs-page .pack-card-art {
    width: min(178px, 66%);
    height: 208px;
    margin: 2px auto 6px;
}

html body main.approved-packs-page .pack-description {
    min-height: 42px;
    max-width: 290px;
    margin-bottom: 6px;
    font-size: .86rem;
    line-height: 1.3;
}

html body main.approved-packs-page .pack-price {
    width: min(212px, 84%);
    min-height: 40px;
    margin-bottom: 6px;
}

html body main.approved-packs-page .pack-price span {
    font-size: clamp(1.48rem, 1.72vw, 1.95rem);
}

html body main.approved-packs-page .odds-list {
    padding: 5px 9px;
}

html body main.approved-packs-page .odds-list div {
    min-height: 23px;
    font-size: .8rem;
}

/* Make the Purchase Flow section one centered composition. */
html body main.approved-packs-page .packs-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 54px 34px 58px;
}

html body main.approved-packs-page .packs-flow .packs-section-heading {
    order: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 8px;
    padding-inline: 0;
    text-align: center;
}

html body main.approved-packs-page .packs-guide-button {
    position: static;
    order: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    width: max-content;
    margin: 0 auto 10px;
}

html body main.approved-packs-page .packs-flow .feature-row {
    order: 3;
    width: calc(100% - 180px);
    max-width: 1320px;
    margin: 0 auto;
    gap: 8px;
}

html body main.approved-packs-page .feature-row article {
    min-height: 94px;
    padding: 10px 14px;
}

html body main.approved-packs-page .feature-row img {
    width: 30px;
    height: 30px;
    margin-bottom: 5px;
}

html body main.approved-packs-page .feature-row h3 {
    margin-bottom: 3px;
    font-size: 1.08rem;
}

html body main.approved-packs-page .feature-row p {
    max-width: 320px;
    font-size: .78rem;
    line-height: 1.32;
}

@media (max-width: 1380px) {
    html body main.approved-packs-page .packs-hero-pack-group {
        width: 320px;
        height: 185px;
        opacity: .96;
    }

    html body main.approved-packs-page .packs-hero-pack-group-left {
        left: 4px;
    }

    html body main.approved-packs-page .packs-hero-pack-group-right {
        right: 4px;
    }

    html body main.approved-packs-page .packs-hero-pack-group img {
        width: 84px;
        height: 174px;
        margin: 0 -9px;
    }
}

@media (max-width: 1180px) {
    html body main.approved-packs-page .packs-catalog .pack-grid,
    html body main.approved-packs-page .packs-flow .feature-row {
        width: calc(100% - 32px);
    }
}

@media (max-width: 820px) {
    html body main.approved-packs-page .packs-catalog,
    html body main.approved-packs-page .packs-flow {
        padding: 48px 18px 54px;
    }

    html body main.approved-packs-page .packs-catalog .pack-grid,
    html body main.approved-packs-page .packs-flow .feature-row {
        width: 100%;
    }

    html body main.approved-packs-page .packs-guide-button {
        margin-bottom: 14px;
    }
}


/* FSB_PACKS_CARD_FRAME_FINAL_BALANCE_20260711
   Final visual balance pass after screenshot review.
   Values above were tightened in-place so cards clear the ornate rails,
   the purchase-flow boxes stay compact and centered, and hero side art is larger. */

/* FSB_PACKS_HERO_FRAME_FOOTER_ALIGNMENT_20260711
   Screenshot-guided Packs cleanup:
   - visually center the hero description between the title and divider
   - enlarge the four-pack artwork on both sides of the title
   - clear the Choose Your Pack sign from the ornate top rail
   - keep the four pack cards above the ornate bottom rail
   - lock the footer to the approved Battles layout. */

/* Place the hero sentence visually halfway between PACKS and the divider. */
html body main.approved-packs-page .packs-hero-copy > p {
    position: relative !important;
    z-index: 3 !important;
    transform: translateY(12px) !important;
}

/* Larger side pack groups while keeping the centered title lane clear. */
html body main.approved-packs-page .packs-hero-pack-group {
    top: -2px !important;
    width: 370px !important;
    height: 226px !important;
    opacity: 1 !important;
}

html body main.approved-packs-page .packs-hero-pack-group-left {
    left: 10px !important;
}

html body main.approved-packs-page .packs-hero-pack-group-right {
    right: 10px !important;
}

html body main.approved-packs-page .packs-hero-pack-group img {
    width: 101px !important;
    height: 216px !important;
    margin: 0 -10px !important;
}

/* The sign's upper jewel must sit below, not on, the ornate top rail. */
html body main.approved-packs-page .packs-catalog {
    padding-top: 76px !important;
    padding-bottom: 84px !important;
}

html body main.approved-packs-page .packs-collection-heading {
    margin-bottom: 24px !important;
}

html body main.approved-packs-page .packs-collection-sign {
    margin-top: 34px !important;
    margin-bottom: 8px !important;
}

/* Reserve real space beneath the cards so the ornate lower rail is visible. */
html body main.approved-packs-page .packs-catalog .pack-grid {
    margin: 0 auto 78px !important;
}

/* Keep the Purchase Flow composition comfortably inside its frame too. */
html body main.approved-packs-page .packs-flow .feature-row {
    margin: 0 auto 36px !important;
}

/* Exact approved footer composition: brand left, status centered,
   links right, copyright centered underneath. */
html body:has(main.approved-packs-page) footer.site-footer,
html body:has(main.approved-packs-page) .site-footer.site-footer {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(240px, 1fr) auto minmax(240px, 1fr) !important;
    grid-template-areas:
        "brand status links"
        "legal legal legal" !important;
    align-items: start !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
    width: min(calc(100% - 56px), 1780px) !important;
    max-width: none !important;
    margin: 8px auto 0 !important;
    padding: 22px 22px 18px !important;
    box-sizing: border-box !important;
    border-top: 1px solid rgba(230, 185, 93, .18) !important;
}

html body:has(main.approved-packs-page) footer.site-footer > div:first-child,
html body:has(main.approved-packs-page) .site-footer.site-footer > div:first-child {
    grid-area: brand !important;
    justify-self: start !important;
    text-align: left !important;
}

html body:has(main.approved-packs-page) footer.site-footer .footer-status,
html body:has(main.approved-packs-page) .site-footer.site-footer .footer-status {
    grid-area: status !important;
    justify-self: center !important;
    align-self: center !important;
    text-align: center !important;
}

html body:has(main.approved-packs-page) footer.site-footer .footer-links,
html body:has(main.approved-packs-page) .site-footer.site-footer .footer-links {
    grid-area: links !important;
    justify-self: end !important;
    align-self: center !important;
    text-align: right !important;
}

html body:has(main.approved-packs-page) footer.site-footer .footer-legal,
html body:has(main.approved-packs-page) .site-footer.site-footer .footer-legal {
    grid-area: legal !important;
    justify-self: center !important;
    margin-top: 10px !important;
    text-align: center !important;
    color: #e2c25a !important;
    font-size: .78rem !important;
}

@media (max-width: 1380px) {
    html body main.approved-packs-page .packs-hero-pack-group {
        width: 350px !important;
        height: 218px !important;
        opacity: 1 !important;
    }

    html body main.approved-packs-page .packs-hero-pack-group img {
        width: 96px !important;
        height: 208px !important;
        margin: 0 -10px !important;
    }
}

@media (max-width: 1120px) {
    html body main.approved-packs-page .packs-hero-copy > p {
        transform: none !important;
    }
}

@media (max-width: 820px) {
    html body main.approved-packs-page .packs-catalog {
        padding-top: 54px !important;
        padding-bottom: 54px !important;
    }

    html body main.approved-packs-page .packs-collection-sign {
        margin-top: 18px !important;
    }

    html body main.approved-packs-page .packs-catalog .pack-grid,
    html body main.approved-packs-page .packs-flow .feature-row {
        margin-bottom: 24px !important;
    }

    html body:has(main.approved-packs-page) footer.site-footer,
    html body:has(main.approved-packs-page) .site-footer.site-footer {
        width: calc(100% - 24px) !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "brand"
            "status"
            "links"
            "legal" !important;
        justify-items: center !important;
        text-align: center !important;
    }

    html body:has(main.approved-packs-page) footer.site-footer > div:first-child,
    html body:has(main.approved-packs-page) footer.site-footer .footer-status,
    html body:has(main.approved-packs-page) footer.site-footer .footer-links,
    html body:has(main.approved-packs-page) footer.site-footer .footer-legal,
    html body:has(main.approved-packs-page) .site-footer.site-footer > div:first-child,
    html body:has(main.approved-packs-page) .site-footer.site-footer .footer-status,
    html body:has(main.approved-packs-page) .site-footer.site-footer .footer-links,
    html body:has(main.approved-packs-page) .site-footer.site-footer .footer-legal {
        justify-self: center !important;
        text-align: center !important;
    }
}

/* FSB_MULTI_PAGE_WIDTH_LOAD_PACKS_POLISH_20260711
   Packs: exact approved lane, true ornate border, balanced hero spacing,
   larger side pack art, safe inner clearance, and approved footer alignment. */

html body main.approved-packs-page .packs-hero,
html body main.approved-packs-page .packs-frame,
html body:has(main.approved-packs-page) footer.site-footer,
html body:has(main.approved-packs-page) .site-footer.site-footer {
    width: min(calc(100% - 56px), 1780px) !important;
    max-width: 1780px !important;
    box-sizing: border-box !important;
}

html body main.approved-packs-page .packs-hero {
    min-height: 278px !important;
    margin: 0 auto !important;
    padding: 18px 24px 10px !important;
}

html body main.approved-packs-page .packs-hero-copy {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-content: start !important;
    width: min(860px, 58vw) !important;
    max-width: 860px !important;
}

html body main.approved-packs-page .packs-hero h1 {
    margin: 0 !important;
}

html body main.approved-packs-page .packs-hero-copy > p {
    width: min(820px, 100%) !important;
    max-width: 820px !important;
    margin: 15px auto !important;
    transform: none !important;
    line-height: 1.45 !important;
    text-align: center !important;
}

html body main.approved-packs-page .packs-hero-divider {
    margin: 0 auto 8px !important;
}

html body main.approved-packs-page .packs-hero-actions {
    margin: 0 auto !important;
}

html body main.approved-packs-page .packs-hero-pack-group {
    top: 2px !important;
    width: 455px !important;
    height: 238px !important;
    opacity: 1 !important;
}

html body main.approved-packs-page .packs-hero-pack-group-left {
    left: 4px !important;
}

html body main.approved-packs-page .packs-hero-pack-group-right {
    right: 4px !important;
}

html body main.approved-packs-page .packs-hero-pack-group img {
    width: 122px !important;
    height: 232px !important;
    margin: 0 -12px !important;
}

html body main.approved-packs-page .packs-frame {
    position: relative !important;
    isolation: isolate !important;
    margin: 0 auto 8px !important;
    overflow: hidden !important;
    border: 28px solid transparent !important;
    border-image-source: url('../../img/fcsb/ui/bboard.webp') !important;
    border-image-slice: 95 125 90 125 !important;
    border-image-width: 28px 36px !important;
    border-image-outset: 0 !important;
    border-image-repeat: stretch !important;
    background:
        radial-gradient(circle at 50% 0, rgba(91, 31, 135, .12), transparent 38rem),
        rgba(2, 7, 10, .87) !important;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .34) !important;
}

html body main.approved-packs-page .packs-frame::before,
html body main.approved-packs-page .packs-frame::after {
    display: none !important;
    content: none !important;
}

html body main.approved-packs-page .packs-catalog {
    padding: 30px 34px 44px !important;
}

html body main.approved-packs-page .packs-collection-heading {
    margin: 0 auto 18px !important;
}

html body main.approved-packs-page .packs-collection-heading .eyebrow {
    margin: 0 auto 4px !important;
}

html body main.approved-packs-page .packs-collection-sign {
    width: min(570px, 58vw) !important;
    max-height: 210px !important;
    margin: 8px auto !important;
}

html body main.approved-packs-page .packs-catalog .pack-grid {
    width: calc(100% - 52px) !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    gap: 8px !important;
    align-items: stretch !important;
}

html body main.approved-packs-page .pack-card {
    min-height: 0 !important;
    height: auto !important;
    padding: 12px 13px !important;
}

html body main.approved-packs-page .packs-flow {
    padding: 26px 34px 30px !important;
}

html body main.approved-packs-page .packs-flow .packs-section-heading {
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto 8px !important;
    padding: 0 !important;
}

html body main.approved-packs-page .packs-guide-button {
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: max-content !important;
    margin: 0 auto 10px !important;
}

html body main.approved-packs-page .packs-flow .feature-row {
    width: calc(100% - 150px) !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
    gap: 8px !important;
}

html body:has(main.approved-packs-page) footer.site-footer,
html body:has(main.approved-packs-page) .site-footer.site-footer {
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) auto minmax(280px, 1fr) !important;
    grid-template-areas:
        'brand status links'
        'legal legal legal' !important;
    align-items: center !important;
    gap: 10px 28px !important;
    margin: 8px auto 0 !important;
    padding: 18px 0 20px !important;
    border-top: 1px solid rgba(204, 158, 61, .24) !important;
    background: transparent !important;
}

html body:has(main.approved-packs-page) footer.site-footer > div:first-child,
html body:has(main.approved-packs-page) .site-footer.site-footer > div:first-child {
    grid-area: brand !important;
    justify-self: start !important;
    display: grid !important;
    justify-items: start !important;
    gap: 2px !important;
    margin: 0 !important;
    text-align: left !important;
}

html body:has(main.approved-packs-page) footer.site-footer .footer-status,
html body:has(main.approved-packs-page) .site-footer.site-footer .footer-status {
    grid-area: status !important;
    justify-self: center !important;
    margin: 0 !important;
    text-align: center !important;
}

html body:has(main.approved-packs-page) footer.site-footer .footer-links,
html body:has(main.approved-packs-page) .site-footer.site-footer .footer-links {
    grid-area: links !important;
    justify-self: end !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    margin: 0 !important;
    text-align: right !important;
}

html body:has(main.approved-packs-page) footer.site-footer .footer-legal,
html body:has(main.approved-packs-page) .site-footer.site-footer .footer-legal {
    grid-area: legal !important;
    justify-self: center !important;
    margin: 0 !important;
    color: #d6b85f !important;
    text-align: center !important;
}

@media (max-width: 1450px) {
    html body main.approved-packs-page .packs-hero-pack-group {
        width: 385px !important;
        height: 218px !important;
    }
    html body main.approved-packs-page .packs-hero-pack-group img {
        width: 105px !important;
        height: 212px !important;
        margin: 0 -11px !important;
    }
}

@media (max-width: 1180px) {
    html body main.approved-packs-page .packs-hero-pack-group {
        display: none !important;
    }
    html body main.approved-packs-page .packs-hero-copy {
        width: min(900px, 82vw) !important;
    }
    html body main.approved-packs-page .packs-catalog .pack-grid,
    html body main.approved-packs-page .packs-flow .feature-row {
        width: calc(100% - 24px) !important;
    }
}

@media (max-width: 820px) {
    html body main.approved-packs-page .packs-hero,
    html body main.approved-packs-page .packs-frame,
    html body:has(main.approved-packs-page) footer.site-footer,
    html body:has(main.approved-packs-page) .site-footer.site-footer {
        width: calc(100% - 24px) !important;
    }
    html body main.approved-packs-page .packs-hero {
        min-height: 0 !important;
    }
    html body main.approved-packs-page .packs-catalog,
    html body main.approved-packs-page .packs-flow {
        padding: 24px 14px 28px !important;
        border-width: 20px !important;
        border-image-width: 20px 26px !important;
    }
    html body main.approved-packs-page .packs-collection-sign {
        width: min(520px, 88vw) !important;
        margin-top: 4px !important;
    }
    html body main.approved-packs-page .packs-catalog .pack-grid,
    html body main.approved-packs-page .packs-flow .feature-row {
        width: 100% !important;
    }
    html body:has(main.approved-packs-page) footer.site-footer,
    html body:has(main.approved-packs-page) .site-footer.site-footer {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            'brand'
            'status'
            'links'
            'legal' !important;
        justify-items: center !important;
        text-align: center !important;
    }
    html body:has(main.approved-packs-page) footer.site-footer > div:first-child,
    html body:has(main.approved-packs-page) footer.site-footer .footer-links,
    html body:has(main.approved-packs-page) .site-footer.site-footer > div:first-child,
    html body:has(main.approved-packs-page) .site-footer.site-footer .footer-links {
        justify-self: center !important;
        justify-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
}
/* END_FSB_MULTI_PAGE_WIDTH_LOAD_PACKS_POLISH_20260711 */




/* FSB_FOUR_PAGE_FINAL_PACKS_CLEANUP_20260711 */
html body main.approved-packs-page .packs-hero,
html body main.approved-packs-page .packs-frame,
html body:has(main.approved-packs-page) footer.site-footer,
html body:has(main.approved-packs-page) .site-footer.site-footer {
    width: min(calc(100% - 56px), 1780px) !important;
    max-width: 1780px !important;
    box-sizing: border-box !important;
}

html body main.approved-packs-page .packs-hero {
    min-height: 292px !important;
    padding: 18px 24px 8px !important;
}

html body main.approved-packs-page .packs-hero-copy {
    width: min(900px, 58vw) !important;
    max-width: 900px !important;
    display: grid !important;
    justify-items: center !important;
    align-content: start !important;
}

html body main.approved-packs-page .packs-hero h1 {
    margin: 0 !important;
}

html body main.approved-packs-page .packs-hero-copy > p {
    width: min(830px, 100%) !important;
    max-width: 830px !important;
    margin: 18px auto 18px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    transform: none !important;
}

html body main.approved-packs-page .packs-hero-divider {
    margin: 0 auto 12px !important;
}

html body main.approved-packs-page .packs-hero-actions {
    margin: 0 auto !important;
}

html body main.approved-packs-page .packs-hero-pack-group {
    top: 10px !important;
    width: 500px !important;
    height: 248px !important;
}

html body main.approved-packs-page .packs-hero-pack-group-left { left: 0 !important; }
html body main.approved-packs-page .packs-hero-pack-group-right { right: 0 !important; }

html body main.approved-packs-page .packs-hero-pack-group img {
    width: 132px !important;
    height: 240px !important;
    margin: 0 -13px !important;
}

html body main.approved-packs-page .packs-frame {
    border: 28px solid transparent !important;
    border-image-source: url('../../img/fcsb/ui/bboard.webp') !important;
    border-image-slice: 95 125 90 125 !important;
    border-image-width: 28px 36px !important;
    border-image-outset: 0 !important;
    border-image-repeat: stretch !important;
    overflow: hidden !important;
    background: radial-gradient(circle at 50% 0, rgba(91,31,135,.12), transparent 38rem), rgba(2,7,10,.87) !important;
}

html body main.approved-packs-page .packs-catalog {
    padding: 32px 34px 52px !important;
}

html body main.approved-packs-page .packs-collection-heading {
    margin: 0 auto 20px !important;
}

html body main.approved-packs-page .packs-collection-heading .eyebrow {
    margin-bottom: 10px !important;
}

html body main.approved-packs-page .packs-collection-sign {
    margin: 0 auto 14px !important;
}

html body main.approved-packs-page .packs-catalog .pack-grid {
    width: calc(100% - 72px) !important;
    max-width: 1580px !important;
    margin: 0 auto !important;
    gap: 10px !important;
}

html body main.approved-packs-page .packs-flow {
    padding: 30px 34px 34px !important;
}

html body main.approved-packs-page .packs-flow .feature-row {
    width: calc(100% - 190px) !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
}

html body:has(main.approved-packs-page) footer.site-footer,
html body:has(main.approved-packs-page) .site-footer.site-footer {
    display: grid !important;
    grid-template-columns: minmax(280px,1fr) auto minmax(280px,1fr) !important;
    grid-template-areas: 'brand status links' 'legal legal legal' !important;
    align-items: center !important;
    gap: 10px 28px !important;
    margin: 8px auto 0 !important;
    padding: 18px 0 20px !important;
}

html body:has(main.approved-packs-page) footer.site-footer > div:first-child { grid-area: brand !important; justify-self: start !important; }
html body:has(main.approved-packs-page) footer.site-footer .footer-status { grid-area: status !important; justify-self: center !important; }
html body:has(main.approved-packs-page) footer.site-footer .footer-links { grid-area: links !important; justify-self: end !important; }
html body:has(main.approved-packs-page) footer.site-footer .footer-legal { grid-area: legal !important; justify-self: center !important; }

@media (max-width:1450px) {
  html body main.approved-packs-page .packs-hero-pack-group { width: 420px !important; height: 225px !important; }
  html body main.approved-packs-page .packs-hero-pack-group img { width: 112px !important; height: 218px !important; margin: 0 -11px !important; }
}
@media (max-width:1180px) {
  html body main.approved-packs-page .packs-hero-pack-group { display:none !important; }
  html body main.approved-packs-page .packs-hero-copy { width:min(900px,82vw) !important; }
}
@media (max-width:820px) {
  html body main.approved-packs-page .packs-hero,
  html body main.approved-packs-page .packs-frame,
  html body:has(main.approved-packs-page) footer.site-footer { width:calc(100% - 24px) !important; }
  html body main.approved-packs-page .packs-catalog .pack-grid,
  html body main.approved-packs-page .packs-flow .feature-row { width:100% !important; }
}
/* END_FSB_FOUR_PAGE_FINAL_PACKS_CLEANUP_20260711 */