/*
 * Trav47 hero window for the three phone layouts.
 * The trav47HeroPage scope deliberately isolates this shell from the legacy
 * generic page and hero navigation rules.
 */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.trav47HeroPage:not(.village1):not(.village2) {
        --trav47-hero-wood-dark: #3d281c;
        --trav47-hero-wood: #5f4330;
        --trav47-hero-gold: #b78a42;
        --trav47-hero-green: #648c2d;
        --trav47-hero-line: #bcc9b8;
        --trav47-hero-surface: #f7faf6;
        --trav47-hero-soft: #e9f0e5;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage:not(.village1):not(.village2) #center {
        height: calc(100dvh - 82px) !important;
        min-height: 0 !important;
        padding-bottom: 82px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage:not(.village1):not(.village2) #center::-webkit-scrollbar {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout="mobile"] body.trav47HeroPage:not(.village1):not(.village2) #center #contentOuterContainer.trav47HeroWindow {
        top: 37px !important;
    }

    html#mainLayout[data-trav47-layout="desktop"] body.trav47HeroPage:not(.village1):not(.village2) #center #contentOuterContainer.trav47HeroWindow {
        top: 37px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage:not(.village1):not(.village2) #center #contentOuterContainer.trav47HeroWindow {
        position: relative !important;
        right: auto !important;
        left: auto !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 2px solid #8b704f !important;
        border-top-width: 1px !important;
        border-radius: 6px !important;
        background: var(--trav47-hero-wood) !important;
        box-shadow: 0 2px 6px rgba(40,27,18,.32) !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage #center #contentOuterContainer.trav47HeroWindow > .contentTitle.trav47HeroHeader {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        z-index: 2 !important;
        display: block !important;
        width: 100% !important;
        height: 43px !important;
        min-height: 43px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-bottom: 2px solid var(--trav47-hero-gold) !important;
        border-radius: 4px 4px 0 0 !important;
        background-color: var(--trav47-hero-wood) !important;
        background-image:
            linear-gradient(180deg, rgba(255,239,205,.16), transparent 34%, rgba(25,15,10,.24)),
            url('../../images/ui/hud/content/header.jpg') !important;
        background-position: center, center bottom !important;
        background-repeat: no-repeat, repeat-x !important;
        box-shadow: inset 0 1px rgba(255,239,209,.35), inset 0 -1px rgba(46,29,18,.7) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage #center #contentOuterContainer.trav47HeroWindow > .trav47HeroHeader > .heroSectionHeader {
        position: absolute !important;
        top: 7px !important;
        right: 43px !important;
        left: 43px !important;
        z-index: 3 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        width: auto !important;
        height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: #fff4df !important;
        direction: rtl !important;
        font: 700 16px/24px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        text-shadow: 0 1px 1px #29180f !important;
        -webkit-text-fill-color: #fff4df !important;
        white-space: nowrap !important;
        pointer-events: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow > .trav47HeroHeader > .heroSectionHeader .heroLevelBadge,
    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow > .trav47HeroHeader > .heroSectionHeader .heroLevelBadge bdi {
        display: inline !important;
        min-width: 0 !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #fff4df !important;
        font: inherit !important;
        line-height: inherit !important;
        text-shadow: inherit !important;
        -webkit-text-fill-color: #fff4df !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage #center #contentOuterContainer.trav47HeroWindow > .trav47HeroHeader #closeContentButton {
        position: absolute !important;
        top: 7px !important;
        right: auto !important;
        left: 9px !important;
        z-index: 5 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 24px !important;
        min-width: 24px !important;
        max-width: 24px !important;
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #293a16 !important;
        border-radius: 3px !important;
        background: linear-gradient(180deg, #7ea94a, #4f7426) !important;
        box-shadow: inset 0 1px rgba(255,255,255,.38), 0 1px 2px rgba(24,16,10,.5) !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage #center #contentOuterContainer.trav47HeroWindow > .trav47HeroHeader #closeContentButton::before,
    html#mainLayout[data-trav47-layout] body.trav47HeroPage #center #contentOuterContainer.trav47HeroWindow > .trav47HeroHeader #closeContentButton::after {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage #center #contentOuterContainer.trav47HeroWindow > .trav47HeroHeader #closeContentButton svg {
        display: block !important;
        width: 11px !important;
        height: 11px !important;
        margin: 0 !important;
        fill: #fff !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage #center #contentOuterContainer.trav47HeroWindow > .trav47HeroHeader #answersButton {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage #center #contentOuterContainer.trav47HeroWindow > .trav47HeroContainer {
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: linear-gradient(180deg, #fbfdfb, #f1f5ef) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage #center #contentOuterContainer.trav47HeroWindow .trav47HeroContent {
        position: relative !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 7px 18px !important;
        overflow: visible !important;
        color: #344333 !important;
        direction: rtl !important;
        font: 400 11px/18px Tahoma, Arial, sans-serif !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47HeroContent > h1.titleInHeader {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47HeroTabs {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        display: block !important;
        width: calc(100% + var(--trav47-hero-tabs-extra-width, 14px)) !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 35px !important;
        min-height: 35px !important;
        margin: 0 var(--trav47-hero-tabs-side-margin, -7px) var(--trav47-hero-tabs-bottom-gap, 8px) !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-bottom: 1px solid #342116 !important;
        border-radius: 0 !important;
        background: var(--trav47-hero-wood-dark) !important;
        z-index: 1000 !important;
        transform: none !important;
        isolation: isolate !important;
        pointer-events: auto !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47HeroTabs > .scrollingContainer {
        position: static !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        direction: rtl !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47HeroTabs .content {
        position: static !important;
        float: none !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47HeroTabs a.tabItem {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 2px !important;
        overflow: hidden !important;
        border: 0 !important;
        border-left: 1px solid rgba(230,199,151,.26) !important;
        border-radius: 0 !important;
        background: linear-gradient(180deg, #674a35, #3e2a1e) !important;
        box-shadow: inset 0 1px rgba(255,235,198,.13) !important;
        color: #f4e4c9 !important;
        font: 700 10.5px/34px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-decoration: none !important;
        text-overflow: clip !important;
        text-shadow: 0 1px 1px #25160f !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47HeroTabs .content:last-child a.tabItem {
        border-left: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47HeroTabs a.tabItem.active {
        background: linear-gradient(180deg, #86aa4d 0, #638d2d 55%, #4e721f 100%) !important;
        color: #fff !important;
        box-shadow: inset 0 1px rgba(240,255,213,.58), inset 0 -1px rgba(37,59,17,.5) !important;
        text-shadow: 0 1px 1px #2e4817 !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47HeroContent .trav47HeroCard,
    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47HeroContent #attributes > .roundedCornersBox,
    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47HeroContent #bodyOptions {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 8px !important;
        padding: 7px !important;
        overflow: hidden !important;
        border: 1px solid var(--trav47-hero-line) !important;
        border-radius: 5px !important;
        background: linear-gradient(180deg, #fff, var(--trav47-hero-soft)) !important;
        box-shadow: inset 0 1px rgba(255,255,255,.92), 0 1px 2px rgba(55,70,48,.1) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47HeroContent :is(.boxes, .roundedCornersBox) > :is(
        .boxes-tl, .boxes-tr, .boxes-tc, .boxes-ml, .boxes-mr, .boxes-mc, .boxes-bl, .boxes-br, .boxes-bc
    ) {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47HeroContent :is(.boxes, .roundedCornersBox) > .boxes-contents {
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47HeroContent #attributes,
    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47HeroContent #bodyOptions,
    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47HeroContent #hero_inventory {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47HeroContent #attributes h4 {
        min-height: 29px !important;
        margin: 0 0 6px !important;
        padding: 5px 8px !important;
        border: 0 !important;
        border-bottom: 1px solid #c9d4c4 !important;
        border-radius: 0 !important;
        background: linear-gradient(180deg, #edf4e9, #dce8d7) !important;
        color: #334b30 !important;
        font: 700 11px/19px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47HeroContent input,
    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47HeroContent select,
    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47HeroContent textarea {
        font-family: Tahoma, Arial, sans-serif !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47HeroContent > .clear:last-child,
    html#mainLayout[data-trav47-layout] body.trav47HeroPage #center #contentOuterContainer.trav47HeroWindow > .contentFooter {
        display: none !important;
    }
}

/* Phone sell tab: five clean item slots per row and compact auction rows. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionSellPage {
        padding: 4px !important;
        background: #edf3f5 !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionSellSection {
        margin-bottom: 5px !important;
        border-radius: 5px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionSellSectionHeader {
        min-height: 29px !important;
        padding: 3px 6px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionSellSectionHeader h2 {
        font-size: 10.5px !important;
        line-height: 19px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionSellRow,
    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionSellHistoryRow {
        grid-template-columns: 32px minmax(0, 1fr) auto auto !important;
        column-gap: 3px !important;
        padding: 3px 4px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionSellCurrent .trav47AuctionSellRow {
        grid-template-columns: 32px minmax(0, 1fr) auto auto !important;
        grid-template-rows: minmax(32px, auto) !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionSellEndingSoon {
        font-size: 8px !important;
        line-height: 16px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionSellCategory {
        width: 30px !important;
        height: 30px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionSellIdentity strong {
        font-size: 9px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionSellMetric,
    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionSellTime {
        font-size: 8.5px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionSellItems {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 3px !important;
        padding: 4px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionSellItem {
        min-height: 72px !important;
        padding-inline: 1px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction #auction.trav47AuctionSellPage #itemsToSale .trav47AuctionSellItemSprite {
        flex-basis: 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        margin: 2px auto 0 !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        transform: none !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionSellItemName {
        font-size: 7.5px !important;
        line-height: 14px !important;
    }
}

/* Phone auction layout: full usable width, no nested legacy frames. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.hero_auction .trav47HeroContent {
        width: 100% !important;
        padding: 0 0 8px !important;
        overflow-x: clip !important;
        overflow-y: visible !important;
        background: #edf3f5 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionTabs {
        width: 100% !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionTabs .tabItem {
        height: 31px !important;
        padding: 0 3px !important;
        font-size: 10px !important;
        line-height: 31px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction #auctionAdventureGate.trav47AuctionAdventureGate {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 7px 9px !important;
        float: none !important;
        clear: both !important;
        width: calc(100% - 12px) !important;
        max-width: none !important;
        margin: 8px 6px 10px !important;
        padding: 10px 11px !important;
        border: 1px solid #c8d7b7 !important;
        border-radius: 8px !important;
        color: #4d5d43 !important;
        background: linear-gradient(180deg, #fbfdf8 0%, #f0f6e9 100%) !important;
        box-shadow: 0 2px 6px rgba(63, 85, 46, .12) !important;
        box-sizing: border-box !important;
        direction: rtl !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction #auctionAdventureGate.trav47AuctionAdventureGate .auctionAdventureBarText {
        position: static !important;
        float: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #405334 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 19px !important;
        text-align: right !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction #auctionAdventureGate.trav47AuctionAdventureGate .auctionAdventureBarNumbers {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        float: none !important;
        min-width: 46px !important;
        margin: 0 !important;
        padding: 2px 7px !important;
        border: 1px solid #aeca8b !important;
        border-radius: 999px !important;
        color: #557332 !important;
        background: #e4efd7 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
        direction: ltr !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction #auctionAdventureGate.trav47AuctionAdventureGate > .clear {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction #auctionAdventureGate.trav47AuctionAdventureGate .auctionAdventureBar {
        grid-column: 1 / -1 !important;
        float: none !important;
        width: 100% !important;
        height: 7px !important;
        margin: 0 !important;
        padding: 1px !important;
        overflow: hidden !important;
        border: 1px solid #b9c9aa !important;
        border-radius: 999px !important;
        background: #fff !important;
        box-sizing: content-box !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction #auctionAdventureGate.trav47AuctionAdventureGate .auctionAdventureBar .bar {
        float: right !important;
        height: 100% !important;
        border-radius: 999px !important;
        background: linear-gradient(90deg, #66983c, #8fba59) !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionFilters {
        gap: 3px !important;
        padding: 4px 4px 7px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionFilter {
        flex-basis: 37px !important;
        width: 37px !important;
        height: 35px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionList {
        gap: 4px !important;
        padding: 4px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionCardToggle {
        grid-template-columns: 38px minmax(0, 1fr) !important;
        gap: 3px !important;
        min-height: 49px !important;
        padding: 3px 4px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionItemIcon {
        width: 36px !important;
        height: 36px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionItemHeading strong {
        font-size: 9.5px !important;
        line-height: 16px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionItemHeading small,
    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionCardStats {
        font-size: 8.5px !important;
        line-height: 14px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionItemMeta {
        gap: 3px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionItemTopline,
    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionItemSubline {
        grid-template-columns: minmax(0, 1fr) minmax(82px, auto) !important;
        gap: 3px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionItemCategory {
        font-size: 8px !important;
        line-height: 13px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionItemTime {
        font-size: 9px !important;
        line-height: 13px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionCardStats {
        gap: 3px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionCardAction {
        min-width: 43px !important;
        min-height: 22px !important;
        padding: 1px 4px !important;
        font-size: 8.5px !important;
        line-height: 18px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionDetail {
        padding: 6px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionDescription p {
        font-size: 9px !important;
        line-height: 15px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionBidFacts small {
        font-size: 8px !important;
        line-height: 13px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionBidFacts strong {
        font-size: 9px !important;
        line-height: 16px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionBidForm {
        grid-template-columns: auto 94px auto !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionBidForm label {
        font-size: 9px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionBidForm button {
        min-width: 56px !important;
        padding-inline: 7px !important;
        font-size: 9px !important;
    }

}

@media screen and (max-width: 350px) {
    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionCardToggle {
        grid-template-columns: 35px minmax(0, 1fr) !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionItemTopline,
    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionItemSubline {
        grid-template-columns: minmax(0, 1fr) minmax(76px, auto) !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionCardStats {
        grid-template-columns: repeat(2, auto) !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47AuctionCardAction {
        min-width: 40px !important;
    }

}

/* Hero destinations and appearance on the three phone layouts. Keep every
   hero tab strip inside the wooden side rails. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_auction #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent,
    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_adventure #center #contentOuterContainer.trav47HeroWindow #content.trav47AdventureContent {
        --trav47-hero-tabs-extra-width: 0px;
        --trav47-hero-tabs-side-margin: 0px;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroView-appearance {
        --trav47-hero-tabs-extra-width: 0px;
        --trav47-hero-tabs-side-margin: 0px;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #center #contentOuterContainer.trav47HeroWindow #content.hero_editor {
        padding-bottom: 12px !important;
        background: transparent !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #center #contentOuterContainer.trav47HeroWindow #content.hero_editor #heroEditor.trav47HeroAppearanceEditor {
        display: grid !important;
        grid-template-columns: minmax(128px, 42%) minmax(0, 58%) !important;
        align-items: start !important;
        gap: 7px !important;
        direction: rtl !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 7px !important;
        overflow: visible !important;
        border: 1px solid #aebba7 !important;
        border-radius: 6px !important;
        background: linear-gradient(180deg, #f7faf4 0%, #edf3e9 100%) !important;
        box-shadow: inset 0 1px rgba(255,255,255,.95), 0 1px 2px rgba(55,70,48,.12) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor .trav47HeroAppearancePreview {
        position: relative !important;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        aspect-ratio: 261 / 340 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 1px solid #8f9f86 !important;
        border-radius: 5px !important;
        background: linear-gradient(180deg, #dce8d5 0%, #c8d7bf 48%, #afc29f 100%) !important;
        box-shadow: inset 0 0 0 2px rgba(255,255,255,.42), 0 1px 2px rgba(48,65,40,.14) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor .trav47HeroAppearancePreview .image {
        position: absolute !important;
        inset: 4px !important;
        width: auto !important;
        height: auto !important;
        aspect-ratio: 254 / 330 !important;
        overflow: hidden !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor .trav47HeroAppearancePreview .image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor .trav47HeroAppearanceControls {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        direction: rtl !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor :is(.trav47HeroAppearanceGender, .trav47HeroAppearanceSections),
    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor .trav47HeroAppearanceSections > .boxes-contents,
    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor #attributesContainer {
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor .trav47HeroAppearanceGender .info {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 36px !important;
        margin: 0 !important;
        padding: 3px 6px !important;
        border: 1px solid #b7c4b0 !important;
        border-radius: 5px !important;
        background: linear-gradient(180deg, #f8fbf6 0%, #e4ede0 100%) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor .trav47HeroAppearanceGender .headline {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 28px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        line-height: 28px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor .trav47HeroAppearanceGender .title {
        display: block !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 2px !important;
        color: #344a30 !important;
        font: 700 11px/28px Tahoma, Arial, sans-serif !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor #genderButtons {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        flex: 0 0 auto !important;
        float: none !important;
        height: auto !important;
        margin: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor #genderButtons button.icon {
        position: relative !important;
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid #9dac96 !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #fff 0%, #e3e9df 100%) !important;
        box-shadow: inset 0 1px #fff !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor #genderButtons button.icon.iconActive {
        border-color: #64883d !important;
        background: linear-gradient(180deg, #91b95a 0%, #668f34 100%) !important;
        box-shadow: inset 0 1px rgba(255,255,255,.45) !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor #genderButtons button.icon img {
        position: absolute !important;
        top: 4px !important;
        left: 4px !important;
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
        background: url('../../images/hero/full/gender.png') transparent no-repeat right 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor #genderButtons button.icon img.heroEditorActivateFemale {
        background-position: right -28px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor #attributesContainer > .info {
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 4px !important;
        overflow: hidden !important;
        border: 1px solid #b9c5b3 !important;
        border-radius: 4px !important;
        background: #fff !important;
        box-shadow: inset 0 1px rgba(255,255,255,.8) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor #attributesContainer > .info:last-child {
        margin-bottom: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor #attributesContainer > .info > .headline {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 30px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 4px 8px 4px 27px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: linear-gradient(180deg, #f1f6ee 0%, #dde8d8 100%) !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor #attributesContainer > .info > .headline::after {
        content: '' !important;
        position: absolute !important;
        top: 10px !important;
        left: 9px !important;
        width: 7px !important;
        height: 7px !important;
        border-right: 2px solid #64843f !important;
        border-bottom: 2px solid #64843f !important;
        transform: rotate(45deg) !important;
        transition: transform .15s ease, top .15s ease !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor #attributesContainer > .info.infoOpen > .headline::after {
        top: 12px !important;
        transform: rotate(225deg) !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor #attributesContainer > .info > .headline .title {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: #374c32 !important;
        font: 700 10.5px/20px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        text-decoration: none !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor #attributesContainer > .info > .headline .expander {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor #attributesContainer > .info > .details {
        display: none !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: center !important;
        justify-items: center !important;
        gap: 4px !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 6px !important;
        overflow: hidden !important;
        border: 0 !important;
        border-top: 1px solid #cbd5c6 !important;
        background: #f7f9f5 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor #attributesContainer > .info.infoOpen > .details {
        display: grid !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor #attributesContainer > .info > .details .attribute {
        display: block !important;
        float: none !important;
        width: 44px !important;
        max-width: 100% !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 3px !important;
        overflow: hidden !important;
        border: 1px solid #b5c0af !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #fff 0%, #edf1ea 100%) !important;
        box-shadow: inset 0 1px #fff !important;
        object-fit: contain !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor #attributesContainer > .info > .details .attribute:active {
        border-color: #6f9148 !important;
        background: #dcebcf !important;
        box-shadow: inset 0 0 0 2px rgba(115,151,72,.18) !important;
        transform: translateY(1px) !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor #attributesContainer .clear {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor .trav47HeroAppearanceActions,
    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor .trav47HeroAppearanceActions form {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor .trav47HeroAppearanceStatus {
        flex: 0 0 100% !important;
        min-height: 15px !important;
        margin: 0 !important;
        padding: 1px 0 0 !important;
        color: #667162 !important;
        font: 700 9px/14px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor .trav47HeroAppearanceStatus.is-success {
        color: #4e7e2b !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor.is-saving {
        cursor: progress !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor .trav47HeroAppearanceButton {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 68px !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 4px 11px !important;
        border: 1px solid #668b3e !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #8fba51 0%, #5d892a 100%) !important;
        color: #fff !important;
        font: 700 10.5px/20px Tahoma, Arial, sans-serif !important;
        text-shadow: 0 1px #42631f !important;
        box-shadow: inset 0 1px rgba(255,255,255,.45), 0 1px 1px rgba(48,66,36,.15) !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor .trav47HeroAppearanceButton.secondary {
        border-color: #a2ada0 !important;
        background: linear-gradient(180deg, #fff 0%, #e3e7df 100%) !important;
        color: #4b5b47 !important;
        text-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor .trav47HeroAppearanceButton:active {
        transform: translateY(1px) !important;
        filter: brightness(.96) !important;
    }

    @media screen and (max-width: 360px) {
        html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #center #contentOuterContainer.trav47HeroWindow #content.hero_editor #heroEditor.trav47HeroAppearanceEditor {
            grid-template-columns: minmax(118px, 40%) minmax(0, 60%) !important;
            gap: 5px !important;
            padding: 5px !important;
        }

        html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero:not(.hero_inventory) #heroEditor #attributesContainer > .info > .details {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
    }
}

/* Mobile hero inventory: one composed stage for the hero and equipped slots,
   followed by an eight-column inventory. This replaces the removed legacy
   mobile inventory layout instead of layering on its absolute-position rules. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory {
        --trav47-hero-slot-size: clamp(37px, 10.7vw, 43px);
        --trav47-hero-stage-height: clamp(390px, 59vh, 500px);
        --trav47-inventory-gap: 2px;
        --trav47-hero-tabs-extra-width: 0px;
        --trav47-hero-tabs-side-margin: 0px;
        --trav47-hero-tabs-bottom-gap: 0px;
        padding: 0 0 18px !important;
        background: #363b2c !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #bodyOptions {
        position: relative !important;
        float: none !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: var(--trav47-hero-stage-height) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid #776746 !important;
        border-bottom-color: #4e432f !important;
        border-radius: 0 !important;
        background:
            linear-gradient(180deg, rgba(255,255,255,.03), rgba(37,40,29,.18)),
            url('../../images/hero/full/heroInventoryBackdrop-v1.png') center 55% / cover no-repeat !important;
        box-shadow:
            inset 0 0 0 2px rgba(233,218,174,.18),
            inset 0 -38px 48px rgba(28,31,23,.22),
            0 2px 4px rgba(43,38,27,.18) !important;
        box-sizing: border-box !important;
        isolation: isolate !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #hero_body_container,
    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #hero_body,
    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #hero_body_content {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #hero_body_container {
        position: relative !important;
        z-index: 1 !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #hero_body {
        z-index: 1 !important;
        overflow: hidden !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #hero_body .heroBodyImage {
        position: absolute !important;
        top: 3% !important;
        right: auto !important;
        bottom: auto !important;
        left: 48% !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 96% !important;
        max-height: 96% !important;
        object-fit: contain !important;
        object-position: center bottom !important;
        transform: translateX(-50%) !important;
        filter: drop-shadow(0 4px 4px rgba(23,27,19,.32)) !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #hero_body_content {
        z-index: 2 !important;
        overflow: visible !important;
        pointer-events: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #hero_body_content > .content {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        pointer-events: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #hero_body_content .content > .draggable {
        position: absolute !important;
        right: 7px !important;
        left: auto !important;
        z-index: 4 !important;
        width: var(--trav47-hero-slot-size) !important;
        height: var(--trav47-hero-slot-size) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid rgba(120,104,67,.94) !important;
        border-radius: 4px !important;
        background: linear-gradient(145deg, rgba(77,82,57,.84), rgba(45,51,37,.9)) !important;
        box-shadow:
            inset 0 0 0 1px rgba(214,197,144,.14),
            inset 0 7px 12px rgba(255,255,255,.035),
            0 1px 2px rgba(26,28,21,.35) !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        transition: filter 90ms ease, box-shadow 90ms ease !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #hero_body_content .content > .draggable::before {
        content: '' !important;
        position: absolute !important;
        inset: -20% !important;
        z-index: 6 !important;
        border-radius: inherit !important;
        background: linear-gradient(115deg, transparent 27%, rgba(255,244,180,.16) 40%, rgba(255,249,205,.88) 50%, rgba(255,232,135,.2) 61%, transparent 74%) !important;
        opacity: 0 !important;
        transform: translateX(115%) !important;
        pointer-events: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #hero_body_content .content > .draggable:active {
        filter: brightness(1.18) saturate(1.08) !important;
        box-shadow:
            inset 0 0 0 1px rgba(255,238,158,.72),
            inset 0 0 10px rgba(255,229,125,.3),
            0 0 7px rgba(245,207,91,.5) !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #hero_body_content .content > .draggable:active::before {
        opacity: 1 !important;
        animation: trav47HeroEquipmentTapShine 360ms ease-out both !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #hero_body_content .content > .draggable::after {
        content: '' !important;
        position: absolute !important;
        inset: 3px !important;
        border: 1px solid rgba(226,211,160,.08) !important;
        border-radius: 2px !important;
        pointer-events: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory .trav47-hero-slot-placeholder {
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
        width: auto !important;
        max-width: 68% !important;
        height: auto !important;
        max-height: 68% !important;
        margin: auto !important;
        object-fit: contain !important;
        opacity: .58 !important;
        filter: sepia(.12) saturate(.78) brightness(.94) !important;
        pointer-events: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory .trav47-hero-slot-label {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #hero_body_content #helmet { top: 4.5% !important; }
    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #hero_body_content #body { top: 18% !important; }
    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #hero_body_content #rightHand { top: 31.5% !important; }
    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #hero_body_content #leftHand { top: 45% !important; }
    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #hero_body_content #shoes { top: 58.5% !important; }
    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #hero_body_content #horse { top: 72% !important; }
    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #hero_body_content #bag { top: 85.5% !important; }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #hero_body_content .content > .draggable .item,
    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #hero_body_content .content > #bag.draggable .item {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #trav47HeroInventoryStatus {
        display: none;
        margin: 6px 8px 0 !important;
        padding: 6px 8px !important;
        border: 1px solid #bb6e60 !important;
        border-radius: 4px !important;
        background: #f7e3df !important;
        color: #8a2518 !important;
        font-size: 12px !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #trav47HeroInventoryStatus.is-error:not(:empty) {
        display: block !important;
    }

    html.trav47-equipment-updating[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory :is(#bodyOptions, #hero_inventory) {
        pointer-events: none !important;
        filter: none !important;
        transition: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #hero_inventory {
        position: relative !important;
        float: none !important;
        clear: both !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 0 10px !important;
        padding: 5px !important;
        overflow: hidden !important;
        border: 1px solid #776746 !important;
        border-top: 0 !important;
        border-radius: 0 0 6px 6px !important;
        background: linear-gradient(180deg, #4b5039, #363b2c) !important;
        box-shadow: inset 0 0 0 1px rgba(225,207,151,.1), 0 2px 4px rgba(43,38,27,.16) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #itemsToSale {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory .trav47HeroAnimalResources {
        margin: 6px 0 0 !important;
        padding: 5px !important;
        border-color: rgba(167,145,90,.9) !important;
        background: linear-gradient(180deg, #4c523b, #383d2e) !important;
        color: #f5edd7 !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory .trav47HeroAnimalResourcesTitle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-direction: row !important;
        gap: 6px !important;
        margin-bottom: 5px !important;
        text-align: right !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory .trav47HeroAnimalResourcesHeading {
        align-items: flex-start !important;
        gap: 1px !important;
        text-align: right !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory .trav47HeroAnimalResourcesHeading strong {
        font-size: 12px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory .trav47HeroAnimalResourcesHeading span {
        color: #d8ccb0 !important;
        font-size: 9px !important;
        line-height: 12px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory .trav47HeroAnimalResourcesActions {
        gap: 2px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 120px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory .trav47HeroAnimalResourcesActions button {
        min-height: 22px !important;
        padding: 1px 4px !important;
        font-size: 10px !important;
        line-height: 17px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory .trav47HeroAnimalResourceGrid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 3px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory .trav47HeroAnimalResource {
        grid-template-columns: 16px minmax(0, 1fr) !important;
        gap: 1px 2px !important;
        padding: 3px !important;
        border-color: rgba(166,143,87,.8) !important;
        background: linear-gradient(145deg, rgba(67,72,53,.98), rgba(46,51,38,.98)) !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory .trav47HeroAnimalResourceAmount {
        color: #fff6d7 !important;
        font-size: 9px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory .trav47HeroAnimalResourceName {
        color: #d8ccb0 !important;
        font-size: 8px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory .trav47HeroResourceNotice {
        margin-bottom: 5px !important;
        padding: 5px !important;
        font-size: 10px !important;
        line-height: 14px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroResourceModal {
        padding: 9px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroResourceModalPanel {
        width: min(340px, 100%) !important;
        max-height: calc(100dvh - 18px) !important;
        border-color: #978052 !important;
        background: linear-gradient(180deg, #484d39, #34392b) !important;
        color: #f5edd7 !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroResourceModalPanel > header {
        padding: 8px 9px !important;
        border-bottom-color: rgba(190,166,101,.56) !important;
        background: linear-gradient(#697443, #4c5733) !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroResourceModalPanel > header strong {
        font-size: 13px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroResourceModalClose {
        width: 26px !important;
        height: 26px !important;
        font-size: 18px !important;
        line-height: 22px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroResourceTransferForm {
        padding: 9px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroResourceTransferFields {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroResourceTransferFields label {
        color: #e7ddc4 !important;
        font-size: 9px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroResourceTransferLabel b {
        color: #f3d98d !important;
        font-size: 9px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroResourceTransferFields input {
        height: 31px !important;
        padding: 4px 6px !important;
        border-color: #8f7b51 !important;
        background: #f7f2e4 !important;
        color: #302819 !important;
        font-size: 12px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroResourceModalStatus {
        min-height: 14px !important;
        margin-top: 6px !important;
        color: #dcebb4 !important;
        font-size: 9px !important;
        line-height: 13px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroResourceModalStatus.is-error {
        color: #ffb1a7 !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroResourceModalPanel footer {
        gap: 5px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroResourceModalPanel footer button {
        min-height: 24px !important;
        padding: 2px 5px !important;
        font-size: 10px !important;
        line-height: 17px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #itemsToSale {
        position: relative !important;
        display: grid !important;
        grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        gap: var(--trav47-inventory-gap) !important;
        direction: rtl !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #itemsToSale > .inventory {
        position: relative !important;
        inset: auto !important;
        float: none !important;
        clear: none !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid rgba(150,130,83,.88) !important;
        border-radius: 2px !important;
        background: linear-gradient(145deg, rgba(61,66,47,.96), rgba(42,47,35,.98)) !important;
        box-shadow: inset 0 0 0 1px rgba(220,202,145,.07), inset 0 8px 14px rgba(255,255,255,.025) !important;
        cursor: pointer !important;
        transition: filter 90ms ease, box-shadow 90ms ease !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #itemsToSale > .inventory::after {
        content: '' !important;
        position: absolute !important;
        inset: -22% !important;
        z-index: 6 !important;
        border-radius: inherit !important;
        background: linear-gradient(115deg, transparent 27%, rgba(255,244,180,.12) 40%, rgba(255,249,205,.86) 50%, rgba(255,232,135,.18) 61%, transparent 74%) !important;
        opacity: 0 !important;
        transform: translateX(115%) !important;
        pointer-events: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #itemsToSale > .inventory:active {
        filter: brightness(1.18) saturate(1.08) !important;
        box-shadow:
            inset 0 0 0 1px rgba(255,238,158,.72),
            inset 0 0 9px rgba(255,229,125,.28),
            0 0 6px rgba(245,207,91,.45) !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #itemsToSale > .inventory:active::after {
        opacity: 1 !important;
        animation: trav47HeroEquipmentTapShine 360ms ease-out both !important;
    }

    @keyframes trav47HeroEquipmentTapShine {
        0% {
            opacity: 0;
            transform: translateX(115%);
        }
        22% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            transform: translateX(-115%);
        }
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #itemsToSale > .inventory .item,
    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #itemsToSale > .inventory .item.highlight,
    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #itemsToSale > .inventory .item.whileDragging {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background-color: transparent !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        box-shadow: none !important;
        touch-action: none !important;
        user-select: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #itemsToSale .amount {
        right: 1px !important;
        left: auto !important;
        top: 1px !important;
        min-width: 14px !important;
        height: 13px !important;
        padding: 0 2px !important;
        border-radius: 2px !important;
        background: rgba(245,240,222,.88) !important;
        color: #3b3d31 !important;
        font: 700 9px/13px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #itemsToSale > .clear,
    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory #itemsToSale > .market {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory .trav47HeroQuickDestinations {
        clear: both !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 2px 0 0 !important;
        padding: 0 6px !important;
        direction: rtl !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory .trav47HeroQuickDestination {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        min-width: 0 !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 5px 8px !important;
        overflow: hidden !important;
        border: 1px solid #756039 !important;
        border-radius: 5px !important;
        background: linear-gradient(180deg, #f4ecd2 0%, #dfd1a9 100%) !important;
        box-shadow: inset 0 1px rgba(255,255,255,.72), 0 1px 2px rgba(42,35,22,.22) !important;
        color: #425927 !important;
        font: 700 12px/1.2 Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        transition: filter 90ms ease, transform 90ms ease, box-shadow 90ms ease !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory .trav47HeroQuickDestination svg {
        flex: 0 0 18px !important;
        width: 18px !important;
        height: 18px !important;
        fill: #657c2d !important;
        filter: drop-shadow(0 1px rgba(255,255,255,.55)) !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory .trav47HeroView-inventory .trav47HeroQuickDestination:active {
        transform: translateY(1px) !important;
        filter: brightness(1.08) saturate(1.06) !important;
        box-shadow: inset 0 0 0 1px rgba(255,238,157,.65), inset 0 0 9px rgba(255,226,115,.3) !important;
    }
}

/* Full-path ownership: legacy rules use several element IDs, so the new
   component claims the same complete path and remains the single authority. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.trav47HeroPage:not(.village1):not(.village2) #center #contentOuterContainer.trav47HeroWindow > .trav47HeroContainer > #content.trav47HeroContent {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 7px 18px !important;
        overflow: visible !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage:not(.village1):not(.village2) #center #contentOuterContainer.trav47HeroWindow > .trav47HeroContainer > #content.trav47HeroContent > nav.trav47HeroTabs {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        display: block !important;
        width: calc(100% + var(--trav47-hero-tabs-extra-width, 14px)) !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 35px !important;
        min-height: 35px !important;
        margin: 0 var(--trav47-hero-tabs-side-margin, -7px) var(--trav47-hero-tabs-bottom-gap, 8px) !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-bottom: 1px solid #342116 !important;
        border-radius: 0 !important;
        background: var(--trav47-hero-wood-dark) !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage:not(.village1):not(.village2) #center #contentOuterContainer.trav47HeroWindow > .trav47HeroContainer > #content.trav47HeroContent > nav.trav47HeroTabs > .scrollingContainer {
        position: static !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        direction: rtl !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage:not(.village1):not(.village2) #center #contentOuterContainer.trav47HeroWindow > .trav47HeroContainer > #content.trav47HeroContent > nav.trav47HeroTabs > .scrollingContainer > .content,
    html#mainLayout[data-trav47-layout] body.trav47HeroPage:not(.village1):not(.village2) #center #contentOuterContainer.trav47HeroWindow > .trav47HeroContainer > #content.trav47HeroContent > nav.trav47HeroTabs > .scrollingContainer > .content > a.tabItem {
        position: static !important;
        float: none !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        transform: none !important;
        pointer-events: auto !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage:not(.village1):not(.village2) #center #contentOuterContainer.trav47HeroWindow > .trav47HeroContainer > #content.trav47HeroContent > nav.trav47HeroTabs > .scrollingContainer > .content:nth-child(1) { grid-column: 1 !important; }
    html#mainLayout[data-trav47-layout] body.trav47HeroPage:not(.village1):not(.village2) #center #contentOuterContainer.trav47HeroWindow > .trav47HeroContainer > #content.trav47HeroContent > nav.trav47HeroTabs > .scrollingContainer > .content:nth-child(2) { grid-column: 2 !important; }
    html#mainLayout[data-trav47-layout] body.trav47HeroPage:not(.village1):not(.village2) #center #contentOuterContainer.trav47HeroWindow > .trav47HeroContainer > #content.trav47HeroContent > nav.trav47HeroTabs > .scrollingContainer > .content:nth-child(3) { grid-column: 3 !important; }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage:not(.village1):not(.village2) #center #contentOuterContainer.trav47HeroWindow > .trav47HeroContainer > #content.trav47HeroContent > nav.trav47HeroTabs > .scrollingContainer > .content > a.tabItem {
        position: relative !important;
        inset: auto !important;
        z-index: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 34px !important;
        padding: 0 2px !important;
        overflow: hidden !important;
        border: 0 !important;
        border-left: 1px solid rgba(230,199,151,.26) !important;
        border-radius: 0 !important;
        background: linear-gradient(180deg, #674a35, #3e2a1e) !important;
        box-shadow: inset 0 1px rgba(255,235,198,.13) !important;
        color: #f4e4c9 !important;
        font: 700 10.5px/34px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        text-decoration: none !important;
        text-overflow: clip !important;
        text-shadow: 0 1px 1px #25160f !important;
        white-space: nowrap !important;
        transform: none !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage:not(.village1):not(.village2) #center #contentOuterContainer.trav47HeroWindow > .trav47HeroContainer > #content.trav47HeroContent > nav.trav47HeroTabs ~ * {
        position: relative !important;
        z-index: 1 !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage:not(.village1):not(.village2) #center #contentOuterContainer.trav47HeroWindow > .trav47HeroContainer > #content.trav47HeroContent > nav.trav47HeroTabs > .scrollingContainer > .content > a.tabItem.active {
        background: linear-gradient(180deg, #86aa4d 0, #638d2d 55%, #4e721f 100%) !important;
        color: #fff !important;
        box-shadow: inset 0 1px rgba(240,255,213,.58), inset 0 -1px rgba(37,59,17,.5) !important;
        text-shadow: 0 1px 1px #2e4817 !important;
    }
}

/* Hero attributes: one clean mobile surface for status, preferences and point distribution. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent.trav47HeroView-attributes {
        --trav47-hero-tabs-extra-width: 0px;
        --trav47-hero-tabs-side-margin: 0px;
        --trav47-hero-tabs-bottom-gap: 0px;
        padding: 0 0 18px !important;
        background: linear-gradient(180deg, #f5f3ec, #eeece4) !important;
        box-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 7px !important;
        color: #3d493a !important;
        font-family: Tahoma, Arial, sans-serif !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes > .trav47HeroStatusPanel {
        width: 100% !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid #aebea7 !important;
        border-radius: 5px !important;
        background: #e8eadf !important;
        box-shadow: inset 0 1px #fff, 0 1px 2px rgba(58,72,50,.14) !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes > .trav47HeroStatusPanel > .boxes-contents {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: linear-gradient(180deg, #f5f4ea, #e3e6d8) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroStatusPanel .attribute.heroStatus {
        display: flex !important;
        align-items: center !important;
        min-height: 28px !important;
        margin: 0 !important;
        padding: 4px 9px !important;
        border: 0 !important;
        border-bottom: 1px solid #d4ddd0 !important;
        background: rgba(248,247,238,.72) !important;
        color: #465342 !important;
        font: 400 10.5px/18px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroStatusPanel .attribute.heroStatus:first-of-type {
        color: #34512e !important;
        font-weight: 700 !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroStatusRows {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 7px !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroStatusRow {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: 23px 9px !important;
        align-items: center !important;
        gap: 3px 5px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 43px !important;
        margin: 0 !important;
        padding: 5px 6px !important;
        border: 1px solid #c5d0c0 !important;
        border-radius: 4px !important;
        background: #f7f6ed !important;
        box-shadow: inset 0 1px rgba(255,255,255,.9) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroStatusName {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #3d5039 !important;
        font: 700 10.5px/20px Tahoma, Arial, sans-serif !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroStatIcon {
        flex: 0 0 auto !important;
        width: 20px !important;
        height: 20px !important;
        margin: 0 0 0 4px !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroStatusValue {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: auto !important;
        min-width: 42px !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        direction: ltr !important;
        text-align: left !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroStatusValue .value {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 42px !important;
        height: 21px !important;
        margin: 0 !important;
        padding: 1px 5px !important;
        border: 1px solid #afc0a9 !important;
        border-radius: 10px !important;
        background: #eef5e9 !important;
        color: #456032 !important;
        font: 700 10px/17px Tahoma, Arial, sans-serif !important;
        font-variant-numeric: tabular-nums !important;
        text-align: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroStatusProgress {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 7px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroStatusProgress .bar-bg {
        width: 100% !important;
        height: 7px !important;
        margin: 0 !important;
        padding: 1px !important;
        overflow: hidden !important;
        border: 1px solid #aebba9 !important;
        border-radius: 4px !important;
        background: #dce5d8 !important;
        box-shadow: inset 0 1px 1px rgba(45,64,39,.14) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroStatusProgress .bar {
        height: 100% !important;
        min-height: 0 !important;
        border-radius: 3px !important;
        background: linear-gradient(90deg, #68992e, #9bc454) !important;
        box-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroStatusRow.experience .trav47HeroStatusProgress .bar {
        background: linear-gradient(90deg, #497e9d, #74b3d6) !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroQuickRow {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr) !important;
        gap: 4px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes :is(.trav47HeroQuickSpeed, .trav47HeroQuickProduction) {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-width: 0 !important;
        min-height: 32px !important;
        padding: 4px !important;
        border: 1px solid #c5d0c0 !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #f8f7ee, #e4e8db) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroQuickProduction {
        padding-right: 2px !important;
        padding-left: 2px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroQuickRow :is(.speed, .production) {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        color: #455541 !important;
        font: 700 9.5px/18px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroQuickProduction .production {
        direction: rtl !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroQuickProduction .productionIcon {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes :is(.trav47HeroQuickProductionLabel, .trav47HeroQuickProductionMain, .trav47HeroQuickCropBonus) {
        display: inline-flex !important;
        align-items: center !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes :is(.trav47HeroQuickProductionMain, .trav47HeroQuickCropBonus) {
        gap: 1px !important;
        direction: rtl !important;
        font-variant-numeric: tabular-nums !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroQuickProductionLabel {
        flex: 0 1 auto !important;
        margin-right: 2px !important;
        overflow: hidden !important;
        color: #455541 !important;
        font: 700 8.5px/17px Tahoma, Arial, sans-serif !important;
        text-overflow: ellipsis !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroQuickProductionMain {
        margin-right: 2px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroQuickCropBonus {
        margin-right: 3px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes :is(.trav47HeroQuickProductionMain strong, .trav47HeroQuickCropBonus strong) {
        color: #3f5d35 !important;
        font: 700 9px/17px Tahoma, Arial, sans-serif !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes :is(.trav47HeroQuickProductionMain i, .trav47HeroQuickCropBonus i) {
        display: inline-block !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroQuickIcon {
        flex: 0 0 auto !important;
        width: 18px !important;
        height: 18px !important;
        margin: 0 0 0 4px !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes > .roundedCornersBox:not(.trav47HeroStatusPanel) {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid #aebea7 !important;
        border-radius: 5px !important;
        background: #ebece1 !important;
        box-shadow: inset 0 1px #fff, 0 1px 2px rgba(58,72,50,.12) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes > .roundedCornersBox:not(.trav47HeroStatusPanel) > h4 {
        width: 100% !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #afc0a9 !important;
        border-radius: 0 !important;
        background: linear-gradient(180deg, #eaf2e5, #dbe8d5) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .openCloseSwitchBar {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 6px 10px 6px 34px !important;
        color: #364d32 !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        user-select: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .openCloseSwitchBar > img.openedClosedSwitch {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .openCloseSwitchBar::after {
        content: "" !important;
        position: absolute !important;
        top: 14px !important;
        left: 12px !important;
        width: 8px !important;
        height: 8px !important;
        border-left: 2px solid #56733b !important;
        border-bottom: 2px solid #56733b !important;
        transform: rotate(135deg) !important;
        transition: transform .15s ease !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .openCloseSwitchBar[aria-expanded="true"]::after {
        top: 12px !important;
        transform: rotate(-45deg) !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .openCloseSwitchBar .title {
        color: #364d32 !important;
        font: 700 12px/20px Tahoma, Arial, sans-serif !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroSelectedResourceSummary {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        min-width: 0 !important;
        margin: 0 7px 0 0 !important;
        color: #687763 !important;
        font: 400 9px/18px Tahoma, Arial, sans-serif !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroSelectedResourceSummary strong {
        min-width: 28px !important;
        color: #4f732f !important;
        direction: ltr !important;
        font: 700 10px/18px Tahoma, Arial, sans-serif !important;
        font-variant-numeric: tabular-nums !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroSelectedResourceSummary i {
        display: inline-block !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .heroPropertiesContent {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 7px 0 0 !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #eef0e8 !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .heroPropertiesContent.hide {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .heroPropertiesContent #setResource {
        width: calc(100% - 14px) !important;
        margin: 0 7px 7px !important;
        padding: 7px !important;
        border: 1px solid #c1cdbd !important;
        border-radius: 4px !important;
        background: #f5f4eb !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .heroPropertiesContent .changeResourcesHeadline,
    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroAttackPanel .changeResourcesHeadline {
        width: 100% !important;
        margin: 0 0 7px !important;
        padding: 0 0 5px !important;
        border-bottom: 1px solid #d7dfd4 !important;
        color: #3e533a !important;
        font: 700 11px/18px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .heroPropertiesContent .resourcePick {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .heroPropertiesContent .resourcePick .resource {
        position: relative !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .heroPropertiesContent .resourcePick .resource label {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: 24px 18px !important;
        align-items: center !important;
        justify-items: center !important;
        gap: 2px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 49px !important;
        margin: 0 !important;
        padding: 3px !important;
        overflow: hidden !important;
        border: 1px solid #c6d1c2 !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #f9f8ef, #e5e9dc) !important;
        box-shadow: inset 0 1px #fff !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .heroPropertiesContent .resourcePick .resource label:hover {
        border-color: #8fa878 !important;
        background: #f3f8ee !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .heroPropertiesContent .resourcePick .resource label:has(input:checked) {
        border-color: #688b3d !important;
        background: linear-gradient(180deg, #f5faeb, #dcebc9) !important;
        box-shadow: inset 0 0 0 1px rgba(120,157,70,.24), 0 1px 2px rgba(68,94,38,.14) !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .heroPropertiesContent .resourcePick .resource label:has(input:checked)::after {
        content: "✓" !important;
        position: absolute !important;
        top: 2px !important;
        right: 3px !important;
        color: #537b28 !important;
        font: 700 9px/12px Tahoma, Arial, sans-serif !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .heroPropertiesContent .resourcePick input[type="radio"] {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .heroPropertiesContent .resourcePick .resource label > i {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
        display: block !important;
        width: 20px !important;
        height: 18px !important;
        margin: 0 !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .heroPropertiesContent .resourcePick .resource label > i.r0 {
        width: 22px !important;
        height: 16px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .heroPropertiesContent .resourcePick .resource label > span.current {
        grid-column: 1 !important;
        grid-row: 2 !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #455740 !important;
        direction: ltr !important;
        font: 700 10px/18px Tahoma, Arial, sans-serif !important;
        font-variant-numeric: tabular-nums !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes > .trav47HeroAttackPanel {
        margin: 7px 0 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroAttackPanel .attackBehaviour {
        width: calc(100% - 14px) !important;
        margin: 0 7px 7px !important;
        padding: 7px !important;
        border: 1px solid #c1cdbd !important;
        border-radius: 4px !important;
        background: #f5f4eb !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroAttackPanel .attackBehaviour .options {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroAttackPanel .attackBehaviour .options > br {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroAttackPanel .attackBehaviour input[type="radio"] {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroAttackPanel .attackBehaviour label {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 5px 6px !important;
        border: 1px solid #c6d1c2 !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #f9f8ef, #e5e9dc) !important;
        color: #495646 !important;
        font: 400 9.5px/17px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroAttackPanel .attackBehaviour input:checked + label {
        border-color: #688b3d !important;
        background: linear-gradient(180deg, #f5faeb, #dcebc9) !important;
        color: #3e5f22 !important;
        font-weight: 700 !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroBenefits {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 7px 0 0 !important;
        padding: 0 0 8px !important;
        overflow: hidden !important;
        border: 0 !important;
        border-top: 1px solid #aebca7 !important;
        border-radius: 0 !important;
        background: #f5f4ed !important;
        box-shadow: inset 0 1px rgba(255,255,255,.92) !important;
        color: #3c4b38 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroBenefitsHeader {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        min-height: 50px !important;
        margin: 0 !important;
        padding: 7px 9px !important;
        border: 0 !important;
        border-bottom: 1px solid #bdcbb6 !important;
        background: linear-gradient(180deg, #e9f1e4, #dce8d6) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroBenefitsTitle {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: right !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroBenefitsTitle h3 {
        margin: 0 !important;
        padding: 0 !important;
        color: #344e30 !important;
        font: 700 13px/20px Tahoma, Arial, sans-serif !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroBenefitsTitle p {
        margin: 1px 0 0 !important;
        padding: 0 !important;
        color: #687363 !important;
        font: 400 9.5px/15px Tahoma, Arial, sans-serif !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroAvailablePoints {
        display: grid !important;
        grid-template-columns: auto 26px !important;
        align-items: center !important;
        gap: 5px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 3px 4px 3px 7px !important;
        border: 1px solid #9eb28f !important;
        border-radius: 13px !important;
        background: rgba(255,255,255,.68) !important;
        color: #52634c !important;
        font: 700 9px/18px Tahoma, Arial, sans-serif !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroAvailablePoints strong {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 26px !important;
        height: 22px !important;
        border-radius: 11px !important;
        background: #648d34 !important;
        color: #fff !important;
        direction: ltr !important;
        font: 700 11px/22px Tahoma, Arial, sans-serif !important;
        font-variant-numeric: tabular-nums !important;
        box-shadow: inset 0 1px rgba(255,255,255,.35) !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroBenefitHeaderTools {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        min-width: 0 !important;
        direction: rtl !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroWisdomButton {
        width: 30px !important;
        height: 28px !important;
        min-width: 30px !important;
        padding: 2px !important;
        border-radius: 6px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroWisdomIcon {
        width: 22px !important;
        height: 22px !important;
        background-position: center !important;
        background-size: contain !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroBenefitList {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 7px !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroBenefitCard {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 6px 7px !important;
        border: 1px solid #c5cec0 !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #fffef8, #edeee6) !important;
        box-shadow: inset 0 1px rgba(255,255,255,.95), 0 1px 1px rgba(57,72,48,.06) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroBenefitHeading {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroBenefitName {
        overflow: hidden !important;
        color: #354a32 !important;
        font: 700 11px/20px Tahoma, Arial, sans-serif !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroBenefitEffect {
        flex: 0 0 auto !important;
        min-width: 54px !important;
        height: 22px !important;
        margin: 0 !important;
        padding: 1px 6px !important;
        border: 1px solid #afbea7 !important;
        border-radius: 11px !important;
        background: #eef5e9 !important;
        color: #466332 !important;
        font: 700 10px/18px Tahoma, Arial, sans-serif !important;
        font-variant-numeric: tabular-nums !important;
        text-align: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroBenefitDescription {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: #6b7367 !important;
        font: 400 9px/14px Tahoma, Arial, sans-serif !important;
        text-align: right !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroBenefitControls {
        display: grid !important;
        grid-template-columns: minmax(70px, 1fr) 42px !important;
        align-items: center !important;
        gap: 5px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 1px 0 0 !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroBenefits.has-available-points .trav47HeroBenefitControls {
        grid-template-columns: 27px minmax(70px, 1fr) 42px 27px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroBenefits:not(.has-available-points) .trav47HeroPointButton {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroPointButton {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 27px !important;
        min-width: 27px !important;
        height: 27px !important;
        min-height: 27px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #789b50 !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #91bd56, #5f8d2d) !important;
        color: #fff !important;
        font: 700 17px/25px Tahoma, Arial, sans-serif !important;
        text-shadow: 0 1px #466b25 !important;
        box-shadow: inset 0 1px rgba(255,255,255,.4) !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroPointSubtract {
        border-color: #9ea897 !important;
        background: linear-gradient(180deg, #f8f7f0, #dadfd5) !important;
        color: #4f5e4a !important;
        text-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroPointButton:disabled {
        border-color: #c7ccc3 !important;
        background: #e6e7e2 !important;
        color: #a6aca2 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        cursor: default !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroBenefitProgress {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 9px !important;
        overflow: hidden !important;
        border: 1px solid #aeb9a9 !important;
        border-radius: 5px !important;
        background: #dbe1d7 !important;
        box-shadow: inset 0 1px 2px rgba(53,67,47,.14) !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes :is(.trav47HeroBenefitBase, .trav47HeroBenefitPending) {
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        display: block !important;
        transition: width .12s ease !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroBenefitBase {
        right: 0 !important;
        background: linear-gradient(90deg, #709b3c, #96bd61) !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroBenefitPending {
        background: linear-gradient(90deg, #cf982c, #efbf50) !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroBenefitPoints {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        min-width: 42px !important;
        height: 27px !important;
        margin: 0 !important;
        padding: 2px 3px !important;
        border: 1px solid #bdc9b8 !important;
        border-radius: 14px !important;
        background: #e8eee4 !important;
        color: #344b30 !important;
        direction: ltr !important;
        font: 700 11px/21px Tahoma, Arial, sans-serif !important;
        font-variant-numeric: tabular-nums !important;
        text-align: center !important;
        box-shadow: inset 0 1px rgba(255,255,255,.75) !important;
        box-sizing: border-box !important;
        -moz-appearance: textfield !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroBenefitInput {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroBenefits:not(.has-available-points) :is(.trav47HeroBenefitsSave, .trav47HeroBenefitsReset) {
        display: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroBenefitsActions {
        display: grid !important;
        grid-template-columns: auto auto !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 7px !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes :is(.trav47HeroBenefitsSave, .trav47HeroBenefitsReset) {
        min-width: 82px !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 4px 12px !important;
        border: 1px solid #668d3d !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #8fbb50, #5d892a) !important;
        color: #fff !important;
        font: 700 11px/20px Tahoma, Arial, sans-serif !important;
        text-shadow: 0 1px #42651f !important;
        box-shadow: inset 0 1px rgba(255,255,255,.42), 0 1px 1px rgba(47,66,35,.14) !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroBenefitsReset {
        border-color: #a5aea0 !important;
        background: linear-gradient(180deg, #fffef8, #dfe3da) !important;
        color: #4c5b47 !important;
        text-shadow: none !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes :is(.trav47HeroBenefitsSave, .trav47HeroBenefitsReset):disabled {
        border-color: #c9cec5 !important;
        background: #e5e7e1 !important;
        color: #a4aaa0 !important;
        text-shadow: none !important;
        box-shadow: none !important;
        cursor: default !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroBenefitsSaveStatus {
        grid-column: 1 / -1 !important;
        min-height: 16px !important;
        margin: 0 !important;
        padding: 1px 0 0 !important;
        color: #687264 !important;
        font: 700 9px/15px Tahoma, Arial, sans-serif !important;
        text-align: center !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroBenefitsSaveStatus.is-success {
        color: #4b7f24 !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroBenefitsSaveStatus.is-error {
        color: #b04432 !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_inventory #center #contentOuterContainer.trav47HeroWindow #content.trav47HeroContent #attributes .trav47HeroBenefits.is-saving {
        pointer-events: none !important;
        opacity: .82 !important;
    }
}

/* Compact adventure cards share the same phone shell as the hero window. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.trav47HeroPage.hero_adventure #center #contentOuterContainer.trav47HeroWindow .trav47AdventureContent {
        width: 100% !important;
        min-width: 0 !important;
        padding-bottom: 10px !important;
        overflow-x: hidden !important;
        background: #edf3f5 !important;
        box-sizing: border-box !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47AdventureHeroStatus {
        min-height: 34px !important;
        margin: 6px !important;
        padding: 5px 7px !important;
        gap: 6px !important;
        font-size: 10px !important;
        line-height: 18px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47AdventureList {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 6px !important;
        padding: 0 6px 2px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47AdventureCard {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 6px !important;
        padding: 0 6px 6px !important;
        border-radius: 5px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47AdventureCardHeader {
        min-height: 31px !important;
        margin: 0 -6px !important;
        padding: 4px 6px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47AdventureCardHeader > div {
        gap: 4px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47AdventureName {
        font-size: 10.5px !important;
        line-height: 18px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47AdventureCoords {
        font-size: 9px !important;
        line-height: 16px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47AdventureDifficulty {
        min-width: 38px !important;
        padding: 1px 5px !important;
        font-size: 8.5px !important;
        line-height: 13px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47AdventureMeta {
        gap: 3px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47AdventureMeta > span {
        padding: 2px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47AdventureMeta small {
        font-size: 8.5px !important;
        line-height: 13px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47AdventureMeta strong {
        font-size: 9px !important;
        line-height: 14px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage :is(.trav47AdventureSendButton, .trav47AdventureBackButton) {
        min-width: 58px !important;
        min-height: 27px !important;
        padding: 3px 9px !important;
        font-size: 10px !important;
        line-height: 19px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47AdventureJourney {
        margin: 6px !important;
        padding-bottom: 7px !important;
        border-radius: 6px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47AdventureSceneImage {
        height: clamp(145px, 44vw, 190px) !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47AdventureScene figcaption {
        min-height: 31px !important;
        padding: 5px 7px !important;
        font-size: 10px !important;
        line-height: 18px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47AdventureJourneyStatus {
        min-height: 40px !important;
        margin: 6px !important;
        padding: 4px 7px !important;
        gap: 6px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47AdventureJourneyStatus strong {
        font-size: 10.5px !important;
        line-height: 17px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47AdventureJourneyStatus small {
        font-size: 9px !important;
        line-height: 14px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47AdventureJourneyInfo {
        gap: 4px !important;
        margin: 0 6px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47AdventureJourneyInfo > div {
        min-height: 29px !important;
        padding: 3px 5px !important;
        gap: 4px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47AdventureJourneyInfo dt {
        font-size: 8.5px !important;
        line-height: 15px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47AdventureJourneyInfo dd {
        font-size: 9.5px !important;
        line-height: 15px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47AdventureJourneyInfo .trav47AdventureRemainingRow dd {
        font-size: 11px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47AdventureJourneyActions {
        margin-top: 6px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47HeroPage .trav47AdventureBackButton {
        min-width: 104px !important;
    }
}